图片上传-限制图片类型、大小

linker-design 组件库为例

 <h-upload 
   :headers="optionsUpload.headers"
   :action="optionsUpload.action"
   :accept="'.png, .jpg, .jpeg, .bmp, .ico, .gif'"
   :show-file-list="false" :fileList="file ? [file] : []"  
   @success="successUpload" :on-before-upload="beforeUpload">
              <template #upload-button>
                <img class="upload" v-if="form.robotIcon" :src="form.robotIcon" alt="" />
                <div class="upload" v-else>
                  <icon-plus class="icon" />
                </div>
              </template>
</h-upload>

:on-before-upload="beforeUpload"

上传图片之前触发

// form 图片上传
const file = ref();
const beforeUpload = (file: File): Promise<boolean | File> => {
  return new Promise((resolve, reject) => {
    const isJpgOrPng = /\/(gif|jpg|jpeg|png|bmp|x-icon)$/i.test(file.type);
    if (!isJpgOrPng) {
      Message.error('仅支持png、jpg、jpeg、bmp、gif、ico格式图片');
    }
    const isLt2M = file.size / 1024 / 1024 <= 2; // 图片小于2M
    if (!isLt2M) {
      Message.error('请上传2M以内图片');
    }
    isJpgOrPng && isLt2M ? resolve(true) : reject('cancel');
  });
};

设置图片上传地址 / 设置请求头

const optionsUpload = ref({
  action: `${baseURL}/file/uploadMinIo`,
  headers: { Authorization: `${token}` },
});