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,
        },
}

上传图片页面：

 <van-uploader class="uploader-change" :max-count="3" //图片最大数量
                                          v-model="data.fileList"
                                          :before-delete="startDelete(inx,inx_item)"//删除图片前调用
                                          :after-read="afterReadChange(inx,inx_item)"//读取图片
                                          accept="image/*"
                                          multiple/>

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]);
                        }
                    }
                }
            },

删除方法与读取相同