一、初识multipart/form-data
enctype属性:
enctype:规定了form表单在发送到服务器时候编码方式,它有如下的三个值。
application/x-www-form-urlencoded:默认的编码方式。但是在用文本的传输和MP3等大型文件的时候,使用这种编码就显得 效率低下。
multipart/form-data:指定传输数据为二进制类型,比如图片、mp3、文件。
text/plain:纯文体的传输。空格转换为 “+” 加号,但不对特殊字符编码。
Vue使用el-upload文件(图片)上传
1.一般的整体流程就是:咱们选择一个文件点击确定上传后,会上传到服务器(action),这时候服务器会返回给我们一个url(在on-success回调中可以拿到),接下来就是在提交表单的时候将该url传给后端就可以了。
2.他们会直接存图片,也就是存图片的二进制对象base64编码,然后返回的时候是url地址 。这时候我们就用不到上面的action了,需要用到on-change事件,拿到我们上传图片的blob对象,并传给后端 。
一 调用action
<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.1 添加组件
<el-form-item label="实验室照片:" prop="photo">
<el-upload class="avatar-uploader" action="" :auto-upload="false" ref="upload" :show-file-list="false" accept="image/*" :on-change="imageChange">
<img v-if="imgurl" :src="imgurl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<div>支持jpg和png格式,小于2M,建议比例16:9</div>
</el-form-item>
2.2 调用接口:
export function uploadFileToFast(params, config, cancelFun) {
// 上传文件
return request({
url: '/file/uploadFileToFast',
method: 'post',
headers: {
"Content-Type": "multipart/form-data",
Authorization: getToken()
},
data: params,
onUploadProgress: config,
cancelToken:cancelFun
})
}
2.3 前端 调用接口方法:
imageChange: function (res, fileList) {
debugger
const file = fileList[fileList.length - 1].raw;
const fileSize = file.size;
let fileExtension = '';
let fileName = '';
if (file.name.lastIndexOf('.') > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1);
fileName = file.name.split('.')[0];
}
if (!fileSize) {
this.$message.error('无效的文件,请重新选择!');
return;
}
if (fileSize / 1024 / 1024 > 2) {
this.$message.error('上传文件大小不能超过 2MB!');
return;
}
if (fileExtension != 'jpg' && fileExtension != 'png' && fileExtension != 'jpeg') {
this.$message.error('支持jpg和png格式!');
return;
}
let params = new FormData();
params.append('fileName', file);
let that = this
const reader = new FileReader() // 创建读取文件对象
reader.readAsDataURL(file) // 发起异步请求,读取文件
reader.onload = function () { // 文件读取完成后
that.imgurl = reader.result
}
uploadFileToFast(params).then((res) => {
console.log(res);
this.form.photo = res;
// this.msgSuccess("上传成功");
}).catch((e) => {
});
this.$refs.upload.clearFiles();
},
参考:
vue el-upload上传文件方法 详细解答 action 和 http-request两种方式_wwf1225的博客-CSDN博客