提示:elementUI中el-upload组件action方式上传
前言
学习多种方式上传图片—学习文档,大神绕行
一、formData上传图片
示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。
二、使用步骤
1.vue中HelloWorld.vue
代码如下(示例):
<template>
<div class="hello">
<h1>{{msg}}</h1>
<el-upload class="avatar-uploader" action="http://127.0.0.1:3002/uploadAction" :on-success="uploadSuccess" :show-file-list="false" :before-upload="beforeAvatarUpload">
<img v-if="imgUrl" :src="imgUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</template>
<script>
import { uploadImg } from "@/axios/index";
export default {
name: "HelloWorld",
data() {
return {
imgUrl: null,
msg: "", //"活在当下!",
};
},
methods: {
beforeAvatarUpload(file) {
const isImage = file.type === "image/jpeg" || "image/png";
const limitSize = file.size / 1024 / 1024 < 2;
if (!isImage) {
this.$message.error("上传头像图片只能是 JPG或png 格式!");
}
if (!limitSize) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
return isImage && limitSize;
},
uploadSuccess(res) {
this.imgUrl = res.data.url;
},
},
};
</script>
2.vue中axios.js
代码如下(示例):
import axios from 'axios';
import { Loading, Message } from 'element-ui';
let urlData = { basicUrl: "http://127.0.0.1:3002" }
let loading;
const instance = axios.create({
baseURL: urlData.basicUrl,
timeout: 1000,
headers: { "X-Requested-With": "XMLHttpRequest" },
withCredentials: false,
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
loading = Loading.service({
lock: true, // 是否锁屏
text: '正在加载...', // 加载动画的文字
spinner: 'el-icon-loading', // 引入的loading图标
background: 'rgba(0, 0, 0, 0.3)', // 背景颜色
})
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
loading.close();
// 对响应数据做点什么
return response.data;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
//POST
export async function uploadImg(data) {
return instance.post('/uploadImg', data);
}
export default instance;
3.koa中routes.js
代码如下(示例):
import Router from 'koa-router';
const router = new Router();
//vue el-upload action地址方式
const uploadAction = async ctx => {
let url = 'http://'+ctx.request.header.host+'/uploads/'+ctx.request.files.file.path.split("\\uploads\\")[1];
ctx.body = {
code: 200,
data: {url},
msg: "",
}
}
router.post('/uploadAction',uploadAction);
export default router;
4.koa中app.js
代码如下(示例):
import koa from 'koa';
import cors from 'koa-cors';
import router from './routes/routes.js';
import staticFiles from 'koa-static';
import koaBody from 'koa-body';
import path from 'path';
const __dirname = path.resolve();
const app = new koa();
app.use(cors({ // 指定一个或多个可以跨域的域名
origin: function (ctx) { // 设置允许来自指定域名请求
if (ctx.url === '/') {
return "*"; // 允许来自所有域名请求, 这个不管用
}
// return 'http://localhost:8000'; // 这样就能只允许 http://localhost:8000 这个域名的请求了
return '*'; // 这样就能只允许 http://localhost:8000 这个域名的请求了
},
maxAge: 5, // 指定本次预检请求的有效期,单位为秒。
credentials: true, // 是否允许发送Cookie
allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], // 设置所允许的HTTP请求方法
allowHeaders: ['Content-Type', 'Authorization', 'Accept'], // 设置服务器支持的所有头信息字段
exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'] // 设置获取其他自定义字段
}))
app.use(koaBody({
multipart: true,
formidable: {
//上传文件存储目录
uploadDir: path.join(__dirname, `/public/uploads/`),
//允许保留后缀名
keepExtensions: true,
multipart: true,
},
jsonLimit:'10mb',
formLimit:'10mb',
textLimit:'10mb'
})); //解析formdata过来的数据
app.use(router.routes());
app.use(router.allowedMethods());
app.use(staticFiles(__dirname + '/public'));
app.listen('3002');
console.log("项目启动,访问:","localhost:3002");
总结
踩坑路漫漫长@~@