vue使用vant上传单张和多张图片,自定义图片参数

页面基于vue开发,使用vant控件van-uploader上传图片。
因控件位于多重list中,为方便上传图片后保存url,需要传递位置信息(也可循环file文件获取位置,比较繁琐)。

图片展示如下:

van-upload.jpg

vue版本:

  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.4",
    "dingtalk-jsapi": "^2.10.3",
    "mockjs": "^1.1.0",
    "vant": "^2.5.9",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6",
    "vuex": "^3.1.3"
  },

控件采用局部引用方式:

import {Uploader} from "vant";

export default {
     components: {
            [Uploader.name]: Uploader,
        },
}

上传图片页面:

 

method中:

afterReadChange(inx, inx_item) {
                // afterReadChange(file) { //不需要自定义参数时使用,调用时不需要传参
                //默认参数file文件,detail中包含name,index(多张图片,index为选择的第一张图片位置)
                // return file => { //只需要一个默认参数
                return (file, detail) => { 
                    if (file.length == undefined) {//选择了单张图片,file单个对象
                        file.status = 'uploading';//图片上传成功后改变状态 success
                        file.message = '上传中...';
                        console.log("单张");
                        this.upLoadPicture(inx, inx_item, detail.index, file);//axios文件上传
                    } else {//选择了多张图片,file为列表
                        console.log("多张");
                        for (var i = 0; i < file.length; i++) {
                            file[i].status = 'uploading';
                            file[i].message = '上传中...';
                            this.upLoadPicture(inx, inx_item, detail.index + i, file[i]);
                        }
                    }
                }
            },

删除方法与读取相同

你可能感兴趣的:(vue使用vant上传单张和多张图片,自定义图片参数)