play-with-pc/src/components/upload/mixins/handle.ts

import Status from "$mixins/status/const/status";

import filePath from '$utils/tool/file';

import compress from "$utils/tool/compress";

import $request from '$utils/request';

export default <LibMixins>{

    data(){
      return {
          vSrc:'',
          status_fetch_key:'upload-next',
          Status
      }
    },

    created() {
        this.setSrc(this.src);
    },

    methods:{

        triggerFile(type:string){

            if (this.status === Status.loading) return ;

            // 如果点击类型为图片且 不允许点击图片上传触发
            if (type === 'image' && !this.triggerImage) return;

            return this.$refs.file && this.$refs.file.open();

        },

        setSrc(src){
            if (src !== this.vSrc) {
                this.vSrc = src;
            }
        },

        uploadFile(file,retry=false) {

            if (this.status === Status.loading) return ;

            // 设置当前状态
            this.setStatus(Status.loading);

            // 获取文件
            file = file[0];

            // 暂存文件
            this.storageFile = file;

            // 清空路径
            this.uploadItem = null;

            if (retry) {
                // 如果设置图片压缩触发
                return this.triggerUpload(file);
            } else {
                filePath.createdPath(file).then((src)=>{
                    // 设置图片路径
                    this.setSrc(src);
                    // 如果设置图片压缩触发
                    if (this.compress) {
                        return this.nextCompress(file,src);
                    } else {
                        return this.triggerUpload(file);
                    }
                }).catch(()=>{
                    this.setSrc('');
                    return  this.triggerUpload(file)
                });
            }
        },

        // 执行压缩操作
        nextCompress(file,src){
            compress.compress(file,src).then((params:Record<string, any>)=>{
                this.storageFile = params.file;
                return this.triggerUpload(params.file);
            }).catch(()=>  this.triggerUpload(file));
        },

        // 执行上传操作
        triggerUpload(file){

            $request.uploadFile({
                url:'hxupload/img_upload',
                data:{
                    file
                },
                token:true
            }).then((data)=>{

                if (data.isSuccess) {

                    this.triggerUploadSuccess(data);

                } else {
                    return this.setStatus(Status.fail)
                }

            }).catch(()=> this.setStatus(Status.fail));

        },

        triggerUploadSuccess(data){

            this.uploadItem = data;

            !this.vSrc && this.setSrc(this.uploadItem.data);

            console.log(this);
            if (this.$attrs.onUploadNext) {
                return this.statusFetch(true,data.data);
            } else {
                this.$emit('upload-success',data.data);
                return this.setStatus(Status.success);
            }
        },

        triggerRetry(){

            if (this.status === Status.loading) return;

            if (this.uploadItem) {
                this.setStatus(Status.loading);
                return this.triggerUploadSuccess(this.uploadItem);
            } else {
                return this.uploadFile([this.storageFile],true);
            }

        },

        triggerChangeStatus(status) {
            if (status === Status.success) {
                this.storageFile = null;
            }
        }
    }

}