Vant Uploader实现上传一张或多张图片

2023-10-31 08:13:52
<van-uploader:file-list="fileList2"max-count="3":max-size="3 * 1024 * 1024":after-read="beforeRead"@oversize="onOversize":deletable="true":before-delete="delUploadImg"></van-uploader>
exportdefault{data(){return{
	      	imageAccept:"/jpg,/png",
            fileList2:[],}},
    methods:{// 上传文件过大onOversize(){this.$notify('图片不能大于3M');},//上传beforeRead(file){
            console.log(file)if(!this.imageAccept.includes(file.type)){returnthis.$notify('请上传 jpg/png 格式图片');}let url="接口";const param=newFormData();
          param.append("file", file.file);let name={
                name:"file",};
            axios.post(url, param, name,{
                headers:{"Content-Type":"multipart/form-data",},}).then((res)=>{if(res.data.code===200){this.fileList2.push({
                        url:res.data.data.url});this.$toast('上传成功');}else{this.$toast('上传失败');}});},//删除delUploadImg(item){
            console.log(item)this.fileList2=this.fileList2.filter((v)=> v.url!= item.url);},}}
  • 作者:王浩雨.
  • 原文链接:https://blog.csdn.net/weixin_48409307/article/details/121657410
    更新时间:2023-10-31 08:13:52