vue3 el-upload的使用

 <el-form-item label="配件/物流图片" prop="upDataImgUrlCopy" class="uploadDelectPosition input_label">

                <el-input v-model="ruleForm.upDataImgUrlCopy" v-show="false" />

                <el-upload v-model:file-list="fileList.fileList"

                    action="http://192.168.0.26:8810/api/Upload/WxIndexUpdate" list-type="picture-card"

                    :on-remove="handleRemove" :on-success="handleSuccess">

                    <el-icon>

                        <Plus />

                    </el-icon>

                </el-upload>

            </el-form-item>

 

const ruleForm = reactive({

            /**配件名称 */

            name: '',

            /**审核状态 */

            auditStatus: '',

            /**寄件状态 */

            mailStatus: '',

            /**签收状态 */

            signStatus: '',

            /**是否返件 */

            returnFlag: false,

            /**图片上传路径地址 */

            upDataImgUrlCopy: [],

            /**描述 */

            desc: '',

        })

        /**图片上传回显集合 */

        var fileList = reactive({

            fileList: []

        })

        /**

         * 文件上传成功是的回调

         * @param {any} file 相关操作的图片信息

         */

        const handleSuccess = (file) => {

            ruleForm.upDataImgUrlCopy = [file.Data.Item2.Url, ...ruleForm.upDataImgUrlCopy]

        }

        /**

         * 移除图片时的回调

         * @param {any} file 相关操作的图片信息

         */

        const handleRemove = (file) => {

            let index = ruleForm.upDataImgUrlCopy.indexOf(file.response.Data.Item2.Url)

            ruleForm.upDataImgUrlCopy.splice(index, 1)

        }