出现的问题:
1、:before-upload="beforeUpload"
是对文件上传做做前置条件限制,但是当auto-upload设置为false时,发现before-upload事件没效果。
最后使用on-change事件来代替before-upload,注意保留on-change事件中原来的钩子
前端:
<template>
<el-upload
class="upload-demo"
ref="upload"
action="#"
:accept="accept"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:on-change="beforeUpload"
:auto-upload="false">
<el-button style="" slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" :disabled="fileList.length<1" size="small" type="success"
@click="submitUpload">上传到服务器
</el-button>
<!-- 上传提示 :before-upload="beforeUpload"-->
<div class="el-upload__tip" slot="tip" v-if="showTip">
请上传
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b></template>
的文件
</div>
</el-upload>
</template>
<script>
import axios from "axios";
import storageService from "@/service/storageService";
export default {
name: "Image",
props: {
// 值
value: [String, Object, Array],
// 大小限制(MB)
fileSize: {
type: Number,
default: 2,
},
// 文件类型, 例如['png', 'jpg', 'jpeg']数组
fileType: {
type: Array,
// default: () => [".jpg", ".jpeg", ".png", ".doc", ".xls", ".xlsx", ".ppt", ".txt", ".pdf"],
default: () => [".pdf"],
},
},
data() {
return {
fileList: [],//上传的文件列表
accept: '',//可上传的文件类型
}
},
created() {
// 从数据中拼接fileType可以接收的类型
this.fileType.forEach(el => {
this.accept += el
this.accept += ','
})
this.fileType.slice(0, this.fileList.length - 2)
},
methods: {
// 上传文件之前的钩子:判断上传文件格式、大小等,若返回false则停止上传
beforeUpload(file,fileList) {
//文件状态改变时的钩子,文件变化时给fileList赋值,fileList通过这种方式获取值;
this.fileList=fileList;
// 校检文件类型
if (this.fileType) {
let fileExtension = "";//file的后缀名
//file name test.pdf
if (file.name.lastIndexOf(".") > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf("."));//获取file后缀名
}
//循环遍历fileType数组,传入的文件后缀名是否在数组中
const isTypeOk = this.fileType.some((type) => {
// if (file.type.indexOf(type) > -1) return true;
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
return false;
});
if (!isTypeOk) {
this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
return false;
}
}
// 校检文件大小
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize;
if (!isLt) {
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
return false;
}
}
return true;
},
//文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用;和handleChange函数绑定,文件变化时给fileList赋值,fileList通过这种方式获取值;
handleChange(file, fileList) {
this.fileList = fileList;
},
submitUpload() { //上传到服务器
const param = new FormData();//发送的数据应为FormDate格式,因此新建一个FormDate格式的param变量存放上传的文件列表;
this.fileList.forEach(//不能直接将fileList数组赋给param变量,应该对fileList进行forEach遍历,通过val.raw来取得文件内容赋给param变量
val=> {
//把多个文件放到同一个请求里,这样只会请求一次接口。否则一个文件就会请求一次
param.append("file", val.raw);
}
);
const config = {
headers: {
"Content-Type": "multipart/form-data",
'Authorization': `Bearer ${storageService.get(storageService.USER_TOKEN)}`
}
}
axios.post("http://localhost:8080/api/file/upload", param, config)
.then(res => {
console.log(res)
// 这里的res需根据后台返回情况判断
if (res.data.code === 200) {
//将文件列表置为空
this.fileList=[];
//上传成功处理
this.$message({
message: "文件上传成功!",
duration: 1000
});
}
},).catch(err => {
console.log(err)
this.$message.error('文件上传失败!');
});
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
}
}
}
</script
<style scoped>
</style>
后端:
package controller
import (
"bmsgo/response"
"bmsgo/utils"
"github.com/gin-gonic/gin"
"path/filepath"
"strconv"
"time"
)
//上传文件到服务器
func Upload(ctx *gin.Context) {
form, err := ctx.MultipartForm()
if err != nil {
return
}
if len(form.File) < 0 {
return
}
if form, err := ctx.MultipartForm(); err == nil {
//1.获取文件
files := form.File["file"]
//2.循环全部的文件
for _, file := range files {
// 3.根据时间鹾生成文件名
fileNameInt := time.Now().Unix()
fileNameStr := strconv.FormatInt(fileNameInt, 10)
//4.新的文件名(如果是同时上传多张图片的时候就会同名,因此这里使用时间鹾加文件名方式)
fileName := fileNameStr + file.Filename
//5.保存上传文件
filePath := filepath.Join(utils.Mkdir("upload"), "/", fileName)
err := ctx.SaveUploadedFile(file, filePath)
if err != nil {
return
}
}
response.Success(ctx, gin.H{"file": "upload success!"}, "文件上传成功!")
return
} else {
response.Fail(ctx, gin.H{"file": "upload failed"}, "文件上传失败!")
return
}
}