1.一般的整体流程就是：咱们选择一个文件点击确定上传后，会上传到服务器（action），这时候服务器会返回给我们一个url（在on-success回调中可以拿到），接下来就是在提交表单的时候将该url传给后端就可以了。
2.但是项目中图片比较的少的时候，服务器可能没有专门存照片的地方，他们会直接存图片，也就是存图片的二进制对象base64编码，然后返回的时候也是返回给前端blob对象
1. 服务器有专门存图片的地方，返回给我们一个路径
<el-form-item label="视频上传" prop="" :rules="[]">
<el-upload
class="upload-demo"
:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/iot/labor/labourSafeTrain`"
:on-success="uploadSuccess"
:before-upload="beforeAvatarUpload"
:show-file-list="true"
:limit='1'
:file-list="videofileList"
>
<el-button size="small" type="primary">点击上传</el-button>
<!-- <div slot="tip" class="el-upload__tip">
只允许导入“xls”或“xlsx”格式文件！
</div> -->
</el-upload>
</el-form-item>
// 上传之前的回调
beforeAvatarUpload(file) {
const isLt50M = file.size / 1024 / 1024 < 50;
//const isJPG = fileType === 'image/jpg' || fileType === 'image/jpeg' || fileType === 'image/png'
if (['video/mp4', 'video/ogg','video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
this.$message.error('上传视频只能是 mp4、ogg、flv、avi、wmv、rmvb 格式!');
return false;
}
//if (!isJPG) {
// this.$message.error('上传图片的格式只能是 JPG或PNG 格式!')
// return false
//}
if (!isLt50M) {
this.$message.error('上传视频大小不能超过 50MB!');
return false;
}
return true;
},
// 上传成功的回调
uploadSuccess(obj,res,file) {
if (obj.success) {
this.$message.success({dangerouslyUseHTMLString: true,
message: obj.msg})
this.inputForm.url = obj.url // 后端返给我们的路径
} else {
this.$message.error('操作失败')
}
},
2.服务器直接存图片的二进制
这时候我们就用不到上面的action了，需要用到on-change事件，拿到我们上传图片的blob对象，并传给后端 。然后后端也会返回blob对象，我们通过window.URL.createObjectURL转成一个url即可回显图片，这时候注意，图片必须是单独的接口并返回二进制对象，我们在用axios请求的时候一定要将responseType设置为blob才可以。后端不可以将图片的二进制编码放在对象里面的一个字段中，这样前端将无法解析
<el-form-item label="机楼图片" prop="img" :rules="[]">
<el-upload
ref="my-upload"
:class="{ 'upload-img': fileList.length }"
action="#"
list-type="picture-card"
:auto-upload="false"
:on-change="handleChange"
:multiple="false"
:before-upload="beforeAvatarUpload"
:file-list="fileList"
:limit="1"
accept=".png, .jpg, .JPG, .JPEG, .jpeg, .PNG .GIF, .gif"
>
<i slot="default" class="el-icon-plus" />
<div style="width: 100%;height: 100%;" slot="file" slot-scope="{ file }">
<img
style="width: 100%;height: 100%;"
class="el-upload-list__item-thumbnail"
:src="file.url"
alt=""
>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete" />
</span>
</span>
</div>
</el-upload>
</el-form-item>
data() {
return {
inputForm: {
id: "",
img: '' // 机楼图片
},
fileList: []
}
}
// 上传之前的回调
beforeAvatarUpload(file) {
const fileType = file.raw.type
const isJPG = fileType === 'image/jpg' || fileType === 'image/jpeg' || fileType === 'image/png'
const isLt20M = file.raw.size / 1024 / 1024 < 20
if (!isJPG) {
this.$message.error('上传图片的格式只能是 JPG或PNG 格式!')
}
if (!isLt20M) {
this.$message.error('上传图片的大小不能超过 20M!')
}
return isJPG && isLt20M
},
// 移除图片
handleRemove(file) {
const index = this.fileList.indexOf(file.url)
this.fileList.splice(index, 1)
},
// 上传图片
handleChange(file, fileList) {
const isFileType = this.beforeAvatarUpload(file)
// 如果文件类型不对，则清空表单及附件列表
if (!isFileType) {
this.fileList = []
return
}
this.inputForm.img = file.raw // 这个就是咱们上传图片的二进制对象
this.fileList = [fileList[0]]
},
