<template>
 <van-uploader v-model="fileList"  :before-read="beforeRead" :after-read="afterRead"/>
</template>
<script setup lang="ts">
const fileList = ref([
  {url: editUser.value.currentValue, isImage: true},
  // Uploader 根據(jù)文件后綴來判斷是否為圖片文件
  // 如果圖片 URL 中不包含類型信息，可以添加 isImage 標(biāo)記來聲明
]);
console.log(fileList)
const beforeRead = (file: any) => {
  console.log(file+'jpg')
  if (file.type !== 'image/jpeg') {
    Toast('請上傳 jpg 格式圖片');
    return false;
  }
  return true;
};
const afterRead = (file: any) => {
  // 返回圖片信息
  console.log(file);
  const ImgUploadFile = async (params: any) => {
    // 要把數(shù)據(jù)變成file格式
    const formData = new FormData(); // 下面有備注
    formData.append('file', params);
    console.log(formData)
    return await myAxios.post('/upload/img', formData, {
      headers: {
        // 注意修改請求頭file格式
        'Content-Type': 'multipart/form-data',
      },
    });
  };
  ImgUploadFile(file.file)
  editUser.value.currentValue =  "你自己的域名/"+ file.file.name;
}
</script>

        <!--七牛云上傳-->
        <dependency>
            <groupId>com.qiniu</groupId>
            <artifactId>qiniu-java-sdk</artifactId>
            <version>7.2.11</version>
        </dependency>
        <!-- 七牛云依賴Gson -->
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.6</version>
        </dependency>

@Controller
@RequestMapping("upload")
public class uploadimg {
    @PostMapping("/img")
    @ResponseBody
    public void up1img(@RequestParam(value = "file", required = false) MultipartFile file) throws IOException {
        if (file.isEmpty()) {
            return;
        }
        String fileName = file.getOriginalFilename();
        InputStream inputStream = file.getInputStream();
        QiniuOssUtils utils = new QiniuOssUtils();
        String upload = utils.upload(inputStream, fileName);
        System.out.println(upload);
    }
}

import com.google.gson.Gson;
import com.qiniu.common.QiniuException;
import com.qiniu.common.Zone;
import com.qiniu.http.Response;
import com.qiniu.storage.BucketManager;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.qiniu.storage.model.DefaultPutRet;
import com.qiniu.util.Auth;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.InputStream;
/**
 * 七牛OSS管理工具
 */
public class QiniuOssUtils {
    /**
     * 存儲(chǔ)空間名
     */
    private static final String BUCKET = "空間名";
    /**
     * accessKey和secretKey
     */
    private static final String ACCESS_KEY = "AK";
    private static final String SECRET_KEY = "CK";
    /**
     * 外網(wǎng)訪問地址(內(nèi)置域名有效期只有30天)
     */
    private static final String BASE_URL = "域名+/";
    /**
     * 上傳管理器
     */
    private UploadManager upload;
    /**
     * 桶管理器（存儲(chǔ)空間管理器）
     */
    private BucketManager bucket;
    public QiniuOssUtils() {
        //創(chuàng)建配置對象
        Configuration cfg = new Configuration(Zone.zone2());
        //創(chuàng)建上傳管理器
        upload = new UploadManager(cfg);
        //創(chuàng)建存儲(chǔ)空間管理器
        bucket = new BucketManager(getAuth(), cfg);
    }
    /**
     * 返回認(rèn)證器（包含的訪問密鑰）
     *
     * @return
     */
    private Auth getAuth() {
        return Auth.create(ACCESS_KEY, SECRET_KEY);
    }
    /**
     * 獲取令牌對象（服務(wù)器返回的授權(quán)信息）
     *
     * @return
     */
    private String getToken() {
        return getAuth().uploadToken(BUCKET);
    }
    /**
     * 文件上傳
     *
     * @param file
     * @return
     */
    public String upload(File file, String key) {
        try {
            return upload(new FileInputStream(file), key);
        } catch (FileNotFoundException | QiniuException e) {
            e.printStackTrace();
        }
        return null;
    }
    /**
     * 上傳文件
     *
     * @param is
     * @param key
     * @return
     * @throws QiniuException
     */
    public String upload(InputStream is, String key) throws QiniuException {
        //上傳流
        Response response = upload.put(is, key, getToken(), null, null);
        //解析返回結(jié)果
        DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
        //將文件的訪問地址返回
        return BASE_URL + putRet.key;
    }
    /**
     * 刪除文件
     *
     * @param key
     */
    public void delete(String key) {
        try {
            bucket.delete(BUCKET, key);
        } catch (QiniuException e) {
            e.printStackTrace();
        }
    }
}