【vue+antd】上传图片 - 使用customRequest方法自定义上传

基于antdv 1.7版本，实现图片墙UI，图片的base64格式上传、删除、回显及进度条等功能。

 

1.HTML

<div class="form-item-content" style="width: 560px;">
    <div class="clearfix" style="width:100%">
        <a-upload :file-list="fileList" list-type="picture-card" accept="image/*"
            :custom-request="customRequest" @preview="onPreview" :remove="onImgRemove"
            :multiple="false">
            <div v-if="fileList.length < 10">
                <a-icon type="plus" />
                <div class="ant-upload-text">上传</div>
            </div>
        </a-upload>
        <a-modal :visible="previewVisible" :footer="null" @cancel="onCancel">
            <img alt="example" style="width: 100%" :src="previewImage">
        </a-modal>
    </div>
</div>

2.JS

<script>
export default {
  data() {
    return {
      previewVisible: false,
      previewImage: '',
      fileList: [],
    };
  },
  methods: {
    getBase64(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => resolve(reader.result);
            reader.onerror = error => reject(error);
        });
    },
    getImgWH(url) {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.src = url;
            img.onload = () => { resolve({ w: img.width, h: img.height }) };
        })
    },
    onCancel() {
      this.previewVisible = false;
    },
    async onPreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    onImgRemove(file) {
        var result = confirm("确定要删除吗？");
        if (!result) {
            return;
        }
        var url = Vue.__ctx + "/form/formDefData/removeData/frmMediaData/" + file.mDataStrCode;
        var param = {};
        $.ajaxSettings.async = false;
        jQuery.post(url, param, (rlt) => {
            if (rlt) {
                if (rlt.isOk) {
                    this.fileList = this.fileList.filter((item) => item.mDataStrCode != file.mDataStrCode);
                    $.Toast.success('删除成功');
                } else {
                    $.Dialog.error("删除失败:" + rlt.msg);
                    return;
                }
            }
        }, "json");
    },
async customRequest(obj) {
        // console.log("customRequest obj ", obj);
        // debugger;
        $.ajaxSettings.async = false;
        var objMediaSet = {};
        if (this.$data.mediaCode) {
            var mediaCode = this.$data.mediaCode;
        } else {
            var mediaCode = this.createMediaCode();
            objMediaSet.__pk__fixed__ = 1;
        }
        if (mediaCode == "") {
            $.Dialog.error("获取媒体编码失败");
            return;
        }
        objMediaSet.Media_strName = obj.file.name;
        objMediaSet.Media_strDescription = obj.file.name;
        objMediaSet.Media_strStatus = "A";
        objMediaSet.Media_strClass = "Image";
        objMediaSet.Media_strCode = mediaCode;

        var MData_strCode = this.createMediaDataCode();
        if (MData_strCode == "") {
            return $.Dialog.error("获取媒体数据编码失败");
        }
        const imgDataUrl = await this.getBase64(obj.file);
        const imgWH = await this.getImgWH(imgDataUrl);
        var entMediaDataList = [{
            __pk__fixed__: 1,
            Media_strCode: mediaCode,
            MData_strCode: MData_strCode,
            MData_strOriginalPath: "",
            MData_intSize: obj.file.size,
            MData_intWidth: imgWH.w,
            MData_intHeight: imgWH.h,
            MData_intPreferred: 0,
            MData_imgData: imgDataUrl.slice(22),
            MData_dtmLastModified: new Date().format("yyyy-MM-dd HH:mm:ss"),
        }];
        // 与以前数据合并
        for (var i = 0; i < this.$data.fileList.length; i++) {
            var item = this.$data.fileList[i];
            var entMediaData = {};
            ////entMediaData.__pk__fixed__=1;
            entMediaData.MData_strCode = item.mDataStrCode;
            entMediaData.MData_strOriginalPath = item.mDataStrOriginalPath;
            entMediaData.MData_intSize = item.mDataIntSize;
            entMediaData.MData_intWidth = item.mDataIntWidth;
            entMediaData.MData_intHeight = item.mDataIntHeight;
            entMediaData.MData_intPreferred = 0;
            entMediaData.MData_imgData = item.mDataImgData;
            entMediaData.Media_strCode = mediaCode;
            entMediaDataList.push(entMediaData);
        }
        objMediaSet.entMediaDataList = entMediaDataList;
        var postData = {
            objMediaSet: objMediaSet,
        };
        // onProgress进度条
        this.$data.fileList.push({ uid: obj.file.uid, name: obj.file.name, status: 'uploading', percent: 70 });

        var url = Vue.__ctx + "/form/formDefData/saveData?key=frmMediaSet&sql=1";
        var post = Vue.baseService.post(url, postData);
        post.then((retData) => {
            if (retData.isOk) {
                var filmPostUrl = Vue.__ctx + "/form/formDefData/saveData?key=frmFilmMediaSet&sql=1";
                if (this.$data.fileList.length > 0) {
                    this.getFilmMediaData();
                    $.Toast.success('上传完成');
                    this.$data.fileList[this.$data.fileList.length - 1].percent = 99;
                } else {
                    var objFilmMediaSet = {};
                    objFilmMediaSet.Media_strCode = mediaCode;
                    objFilmMediaSet.Film_StrCode = $("#hid_film_code").val();
                    objFilmMediaSet.MSType_strCode = this.$data.showMediaTypesMap.get(this.$data.posterGraphic);
                    var filmPostData = {};
                    filmPostData.objFilmMediaSet = objFilmMediaSet;
                    var filmPost = Vue.baseService.post(filmPostUrl, filmPostData);
                    filmPost.then((retFilmData) => {
                        this.getFilmMediaData();
                        $.Toast.success('上传完成');
                        this.$data.fileList[this.$data.fileList.length - 1].percent = 99;
                    }, function (e) {
                        alert(e);
                    });
                }
            } else {
                this.$data.fileList.pop();
                $.Dialog.error("上传失败:" + retData.msg);
            }
            // $('#file').val("");
        }, (err) => {
            this.$data.fileList.pop();
            $.Dialog.error("上传失败:" + err);
        });
        $.ajaxSettings.async = true;
    },
    getFilmMediaData: function () {
        // this.$data.posterGraphicImagesList = [];
        // $("#div_show_upload").empty();
        // $("#hid_media_data").val("");
        $.getResultData(Vue.baseService.post(Vue.__ctx + "/form/formCustSql/view/list_lstFilmMediaData", {
            curPage: 1,
            pageSize: 100,
            params: `{"queryData":[{"name":"Film_strCode","con":"=","val":"` + this.data.objFilm.Film_strCode + `"}]}`
        }), (data) => {
            this.$data.fileList = [];
            if (data.list.length > 0) {
                for (var i = 0; i < data.list.length; i++) {
                    var itemData = data.list[i];
                    if (itemData.MSType_strCode == this.$data.showMediaTypesMap.get(this.$data.posterGraphic)) {//海报
                        var itemSrc = "data:image/png;base64," + itemData.MData_imgData;
                        var mdata = {};
                        mdata.dataSrc = itemSrc;
                        mdata.mDataStrCode = itemData.MData_strCode;
                        mdata.mediaStrCode = itemData.Media_strCode;
                        mdata.mDataImgData = itemData.MData_imgData;
                        mdata.mDataStrOriginalPath = itemData.MData_strOriginalPath;
                        mdata.mDataIntSize = itemData.MData_intSize;
                        mdata.mDataIntWidth = itemData.MData_intWidth;
                        mdata.mDataIntHeight = itemData.MData_intHeight;
                        // this.$data.posterGraphicImagesList.push(mdata);
                        mdata.uid = itemData.MData_strCode;
                        mdata.name = itemData.MData_strCode;
                        mdata.status = "done";
                        mdata.url = 'data:image/png;base64,' + itemData.MData_imgData;
                        this.$data.fileList.push(mdata);
                    }
                }
                this.$data.mediaCode = data.list[0].Media_strCode;
            }
        });
    },


  },

};
</script>