vue实现图片上传的三种方法
1.使用elementui框架实现图片上传
:accept="'image/*'"//接受上传的[文件类型]
:action="上传的接口地址"
list-type="picture-card"//文件列表的类型
:show-file-list="false"//是否显示已上传文件列表
:file-list="fileLists"//上传的文件列表
:limit="1"//最大允许上传个数
:data={a:1}//所携带的参数
name="upimgfile" //上传的文件字段名默认file
>
选择文件
最后请求成功后可以获取后端返回的图片链接imgSrc
image.png
如何出现下面这中情况是什么问题呢，明明请求成功了，code返回的是0,为啥data里面是空的呢，
可能是el-upload组件的name(上传的文件字段名)的字段不正确或没有这个属性，如果出现这中问题，需要询问后端文件的字段名是否前后端一致
image.png
2使用elementui的自定义的方法上传
:accept="'image/*'"//接受上传的[文件类型]
:action="上传的接口地址"
list-type="picture-card"//文件列表的类型
:show-file-list="false"//是否显示已上传文件列表
:file-list="fileLists"//上传的文件列表
:limit="1"//最大允许上传个数
:data={a:1}//所携带的参数
:http-request="uploadFile"//覆盖默认的上传行为，可以自定义上传的实现
选择文件
//上传图片
uploadFile(params) {
const that = this;
console.log(params)
const _file = params.file;
const isLt2M = _file.size / 1024 / 1024 < 2;
// 通过 FormData 对象上传文件
var formData = new FormData();
formData.append("uploadFile", _file);
if (!isLt2M) {
this.$message.error("请上传2M以下的文件");
return false;
};
that.$setCookie('isUploadImg',true);
UploadImg(that.geturl,formData,function(res){
if(params.data.a == 1){
that.imgback = res.data.data[0].imgSrc
}else if(params.data.a == 2){
that.imgfoward = res.data.data[0].imgSrc
}
})
},
通过之定义方法可以拿到elementui处理过的图片 信息file
image.png
然后将图片信息放到formData实例对象中，调用上传图片的方法，成功后就能获取后端返回的图片链接
//上传图片
export function UploadImg(urls,pram,callBack){
let url = '地址' + urls;
axios({
url: url,
method: 'post',
data: pram,
processData: false,
contentType: false,
}).then(res => {
callBack(res);
delCookie('isUploadImg')
}).catch((e) => {
alert(e);
delCookie('isUploadImg')
})
3.使用
选取并解读照片信息
type="file" name="file[]" class="file bor" accept="image/*" @change="upImgOne($event)">
选择文件
在upimgone方法中获取图片信息
//选取并解读照片信息
upImgOne(e) {
console.log(e)
this.uploadFile(e.target.files[0])
},
image.png
然后后面的事情就和第二种上传方式的过程一样了,成功之后获取后端返回得图片链接
//上传图片
uploadFile(params) {
let that = this;
console.log(params)
const _file = params;
const isLt2M = _file.size / 1024 / 1024 < 2;
// 通过 FormData 对象上传文件
var formData = new FormData();
formData.append("uploadFile", _file);
if (!isLt2M) {
that.$message.error("请上传2M以下的文件");
return false;
};
UploadImg(that.geturl,formData,function(res){
that.upheadimg(res.data.data[0].imgSrc)
})
},
