Vue 上传照片要求 Content-Type 为 multipart/form-data
HTML是这样的<el-uploadref="options"action="#":limit="1":http-request="requestUpload":show-file-list="false":before-upload="beforeUpload"><el-button size="small">选择<i class="el-icon-upload e
·
HTML是这样的
<el-upload
ref="options"
action="#"
:limit="1"
:http-request="requestUpload"
:show-file-list="false"
:before-upload="beforeUpload"
>
<el-button size="small">
选择
<i class="el-icon-upload el-icon--right"></i>
</el-button>
</el-upload>
<el-button
style="float: right"
type="primary"
size="small"
@click="uploadImg()"
>提 交</el-button
>
JS是这样的
// 上传预处理
beforeUpload(file) {
if (file.type.indexOf("image/") == -1) {
this.msgError("文件格式错误,请上传图片类型,如:JPG,PNG后缀的文件。");
} else {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
this.options.img = reader.result;
this.file_name = file;
};
}
},
// 上传图片
uploadImg() {
if (this.file_name) {
let fileFormData = new FormData();
fileFormData.append("file",this.file_name);
//append是追加或者新增的意思,里面的参数以键值对的形式 照片名=>照片就可以了
carousel(fileFormData).then((response) => {
console.log(response);
if (response.code == 200) {
this.open = false;
this.$emit('byval' , response.data);
}else{
this.msgError(response.msg);
}
});
} else {
this.msgError("请上传图片类型,如:JPG,PNG后缀的文件");
}
},
其实上面这样就可以了,不过要是想改变Content-Type
// 上传预处理
beforeUpload(file) {
if (file.type.indexOf("image/") == -1) {
this.msgError("文件格式错误,请上传图片类型,如:JPG,PNG后缀的文件。");
} else {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
this.options.img = reader.result;
this.file_name = file;
};
}
},
// 上传图片
uploadImg() {
if (this.file_name) {
let fileFormData = new FormData();
fileFormData.append("file",this.file_name);
let requestConfig = {
headers: {
"Content-Type": "multipart/form-data",
},
};
carousel(fileFormData,requestConfig).then((response) => {
if (response.code == 200) {
this.open = false;
this.$emit('byval' , response.data);
}else{
this.msgError(response.msg);
}
});
} else {
this.msgError("请上传图片类型,如:JPG,PNG后缀的文件");
}
},
封装的接口是这样的
export function carousel(data,item) {
return request({
url: '我是接口',
Headers:item,
method: 'post',
data: data
})
}
更多推荐
已为社区贡献2条内容
所有评论(0)