element plus upload http-request 手动上传 Minio_element-plus upload 手动上传

element plus upload http-request 手动上传 Minio

<el-upload
            method="put"
            :before-upload="beforeAvatarUpload"
            :on-error="handleError"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            on-success="handlePictureCardSuccess"
            action="#"
            list-type="picture-card"
            :http-request="handleUpload"
            :file-list="fileList"
          >
            <el-icon>
              <plus />
            </el-icon>
          </el-upload>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

const handleUpload = async ({ file, onProgress, onSuccess, onError }: { file: File; onProgress: Function; onSuccess: Function; onError: Function }) => {
  try {
    // 1. 获取上传地址
    const uploadUrlResponse = await api.post('你的签名URL接口')
    const uploadUrl = uploadUrlResponse.data
    // 2. 创建 FormData 对象并添加文件
    const formData = new FormData()
    formData.append('file', file)
    // 3. 使用 axios 上传文件
    const response = await axios.put(uploadUrl, file, {
      // headers: {
      //   'Content-Type': 'multipart/form-data',
      // },
      // 进度条，你可以选择不需要  
      onUploadProgress: (progressEvent: ProgressEvent) => {
        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
        uploadPercentage.value = percentCompleted
        if (onProgress) {
          onProgress({ percent: percentCompleted })
        }
      },
    })
    console.log('
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/煮酒与君饮/article/detail/830819