前端文件上传（两种）
（一） element UI组件
<el-upload
class="avatar-uploader"
action="/api/image/upload"
multiple
:show-file-list="true"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
注意：action部分中/api 为代理 用于解决跨域情况 也可以用一下写法
//html 部分
<el-upload
class="avatar-uploader"
:http-request="fileChange"
multiple
:show-file-list="true"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
//js
fileChange(files) {
console.log(files.file)
let form = new FormData();
form.append('file', files.file);
//该方法为axios封装方法
imageUpload(form).then(res => {
})
}
//axios封装方法详细部分
import request from '../utills/axios.js'
export function imageUpload(file) {
return request({
url: '/image/upload',
headers: {
'Content-Type': 'multipart/form-data'},
method: 'post',
data:file
})
}
（二） 原生
//html 部分
<input type="file" multiple="multiple" @change="fileChange" placeholder="上传文件">
//js
fileChange() {
let fileList = event.target.files;
let file = fileList[0];
let form = new FormData();
form.append('file',file);
//你的post接口，formData方式发送
imageUpload(form).then(res => {
})
}
后端文件配置
app.js文件中加入
const koaBody = require('koa-body');
app.use(koaBody({
multipart: true,
formidable: {
//上传文件存储目录
uploadDir: path.join(__dirname, `/public/uploads/`),
//允许保留后缀名
keepExtensions: true,
multipart: true,
}
})
)
路由文件部分
router.post('/upload', async (ctx, next) => {
var str=ctx.request.files.file.path
var pathArr=str.split("\\uploads\\")
var basicUrl="http://localhost:3001/" //为基础路径
console.log(pathArr)
ctx.body = {
// filename: ctx.request.files.file,
path:basicUrl+'uploads/'+pathArr[1]
}
})
在网上查阅资料，大部分处理图片文件使用的都是koa-multer
自己也有试着配置但是总是不生效仍在采坑中，具体配置如下
在utils目录下新建文件upload.js
const multer = require('koa-multer')
//配置
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'public/uploads'); //配置图片上传的目录
},
filename: function (ctx,file,cb) {
console.log('修改文件名')
const filenameArr = file.originalname.split('.');
cb(null,Date.now() + '.' + filenameArr[filenameArr.length-1]);
}
})
console.log(storage)
//加载配置
var upload = multer({
storage})
module.exports = upload
路由中使用
const koaRouter = require('koa-router');
const upload = require('../utils/upload')
router.post('/upload', upload.single('file'), async (ctx, next) => {
ctx.body = {
filename: ctx.request.files.file,
}
})
app.js文件中加入
const koaBody = require('koa-body');
app.use(koaBody({
multipart: true,
})
)
运行后能上传成功，也有返回值，但是却没有文件保存到本地目录 且upload.js路径引入正确，但打印修改文件名称打印不出来，欢迎了解的朋友解惑