<el-form-item label="照片" prop="staffImg">
    <template v-slot:label>
        <span v-show="!rules.staffImg[0].required"
            style="color: #ff4949;margin-right: 4px;">*</span>
        <span>照片</span>
    </template>
    <el-upload class="avatar-uploader" :action="action" ref="upload" :show-file-list="false"
        :on-change="uploadChange" :headers="headers" :before-upload="fileBeforeUpload"
        :on-success="fileUploadSuccess" accept=".jpg,.png">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</el-form-item>

            // 表單校驗
            rules: {
                staffImg: [
                    { required: true, message: "圖片不能為空", trigger: ["blur", 'change'] },
                ],
            },

    computed: {
        // 上傳頭像
        action() {
            let baseUrl = "";
            if (process.env.NODE_ENV === "development") {
                baseUrl = process.env.VUE_APP_BASE_API + "/base/common/uploadFile";
            } else {
                baseUrl = process.env.VUE_APP_BASE_API + "/base/common/uploadFile";
            }
            return baseUrl;
        },
    },

        uploadChange(file, fileList) {
            // console.log("上傳進行改變", this.imageUrl);
            this.headFile = file;
            this.rules.staffImg[0].required = false;
        },
        //圖片上傳之前
        fileBeforeUpload(file) {
            const that = this;
            let size = file.size / 1024 / 1024;
            if (size >= 1) {
                that.$modal.msgError("上傳圖片過大！請上傳1M以內(nèi)的圖片");
                return;
            }
            const isJpgOrPng =
                file.type === "image/jpeg" || file.type === "image/png";
            // const isLt1M = file.size / 1024 / 1024 < 1;
            const isLt1M = true;
            if (!isJpgOrPng) {
                this.$message.error("上傳圖片只能是 JPG 或 PNG 格式!");
                return false;
            }
            // 加密
            const time = toString(new Date().getTime());
            const p = encrypt(time);
            this.headers["s"] = p;
            this.headers["t"] = time;
            return new Promise((resolve) => {
                // 小于1M 不壓縮
                if (isLt1M) {
                    resolve(file);
                }
                // 壓縮到400KB,這里的400就是要壓縮的大小,可自定義
                imageConversion.compressAccurately(file, 200).then((res) => {
                    resolve(res);
                });
                // compressAccurately有多個參數(shù)時傳入對象
                imageConversion
                    .compressAccurately(file, {
                        size: 1024, //圖片大小壓縮到1024kb
                        width: 1280, //寬度壓縮到1280
                    })
                    .then((res) => {
                        resolve(res);
                    });
            });
        },
        //照片上傳成功
        fileUploadSuccess(res, file) {
            this.form.staffImg = res.data.dbPath;
            this.imageUrl = URL.createObjectURL(file.raw);
            this.rules.staffImg[0].required = false;
        },