介绍一下开发中遇到的关于iview 文件选择上传和拖拽上传控件upload,手动上传文件信息和自动上传的不同代码写法
1.自动上传,不需要附带其他除文件外的信息
<Upload ref="upload"
:format="['txt']"
:max-size="61440"
:action="/yourPath"
:on-success="success"
:on-error="err"
:on-format-error="err"
>
export default {
methods:{
//图片或者文件上传成功回调函数
success(res, file, fileList) {
if (res.result == 'N') {
this.$Message.error(res.message, 3);
} else {
this.$Message.success('上传成功', 3);
}
//清空文件
this.$refs.upload.clearFiles();
},
//上传图片失败回调函数
err(res, file, fileList) {
this.$Message.error('文件上传失败!', 3);
this.$refs.upload.clearFiles();
}
}
}
- 手动上传,除文件之外,还需要附带其他信息,如文件描述等等,如下图,点击“提交”按钮,一起上传
重点在于设置请求头部为 ‘Content-Type’: ‘multipart/form-data’
<Upload ref="upload"
action="123"
:before-upload="handleUpload">
<Button type="default" ghost >上传</Button>
</Upload>
export default {
name: "dataSet",
data(){
return{
uploadModelModal:{
file:'',
modelName:'',
modelFileName:'',
modelDesc:''
}
},
methods:{
handleUpload (file) {
this.uploadModelModal.modelFileName = file.name;
this.uploadModelModal.file = file;
//阻止自动上传
return false;
},
handleUploadModel(){
**//添加请求头**
let config = {
headers: {'Content-Type': 'multipart/form-data'}
};
//以formData形式上传
var param = new FormData();
param.append('file',this.uploadModelModal.file);
param.append('modelName',this.uploadModelModal.modelName);
param.append('modelDesc',this.uploadModelModal.modelDesc);
this.$axios.post(path + 'model/upload', param, config).then((res) => {
console.log("上传模型",res);
if(res.data.result == 'Y'){
this.$Message.success(res.data.message);
}else{
this.$Message.error(res.data.message);
}
})
}
}
}