1.首先前端放入獲取上傳的組件
微信小程序uview組件：
https://www.uviewui.com/components/upload.html

vue所使用的element組件：
https://element.eleme.cn/#/zh-CN/component/upload

上面一個是微信小程序的上傳，一個是普通瀏覽器的前端上傳組件的代碼出處。

后端我們需要一個阿里云的依賴，這個依賴是工具包用的。

<dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.10.2</version></dependency>

接下來需要配置yaml文件

aliyun:oss:file:endpoint: oss-cn-（區域：上海、北京等，用拼音表達，注意這個括號是不存在的）.aliyuncs.comkeyId: 開通oss服務時生成的keyIdkeySecret: 開通oss服務時生成的keySecretdirName: 阿里云上傳圖片路徑的文件名比如：/avatarbucketName: bucketName

這些去哪里獲取，如何開通
（1）開通OSS服務
去阿里云打開oss管理控制臺開通



然后創建Bucket存儲空間



創建文件夾上傳圖片

在頭像中，點擊“AccessKey管理”進行RAM設置

選擇使用子用戶
創建用戶組：

添加用戶
添加用戶到用戶組
設置權限

獲取子用戶AccessKeyId,AccessKeySecret
這樣就獲取到了ymal所以的配置信息。
接下里就是后端程序代碼和兩個工具類：
上傳方法：

@Resourceprivate OSSUtils ossUtils; @PostMapping("/upload")public BaseResult upload(MultipartFile file)throws IOException{System.out.println("dadadadaad");InputStream is = file.getInputStream();String path = ossUtils.uploadToOSS(file);if (file.getSize()>1048576){return BaseResult.error("圖片不得大于1M");}paths=path;return BaseResult.ok("上傳成功",path);}

兩個工具類：

package com.czxy.oss;import lombok.Data; import org.springframework.boot.context.properties.ConfigurationProperties; import org.springframework.stereotype.Component;@Component @ConfigurationProperties(prefix="aliyun.oss.file") @Data public class OSSProperties {private String endpoint;private String keyId;private String keySecret;private String dirName;private String bucketName; } package com.czxy.oss;import com.aliyun.oss.OSS; import com.aliyun.oss.OSSClientBuilder; import org.springframework.stereotype.Component; import org.springframework.web.multipart.MultipartFile;import javax.annotation.Resource; import java.util.UUID;/*** @author 桐叔* @email liangtong@itcast.cn*/ @Component public class OSSUtils {@Resourceprivate OSSProperties ossProperties;/*** 上傳到OSS* @param file 上傳文件* @return 上傳后的路徑*/public String uploadToOSS(MultipartFile file) {try {// 創建OSSClient實例。OSS ossClient = new OSSClientBuilder().build(ossProperties.getEndpoint(), ossProperties.getKeyId(), ossProperties.getKeySecret());//System.currentTimeMillis() //毫秒值String name = UUID.randomUUID().toString().replace("-", ""); //32長度// 截取圖片的擴展名 mm.jpgString[] arr = file.getOriginalFilename().split("\\.");// 路徑String path = ossProperties.getDirName() + "/" + name + "." + arr[1];// 上傳圖片ossClient.putObject(ossProperties.getBucketName(), path , file.getInputStream());// 關閉OSSClient。ossClient.shutdown();//https://czxy-lt.oss-cn-shanghai.aliyuncs.com/avatar/b9c4d0a19b1d48eb89d9ff61284f83d6.jpgreturn "https://"+ossProperties.getBucketName()+"."+ossProperties.getEndpoint()+"/" + path;} catch (Exception e) {throw new RuntimeException("上傳OSS異常");}}}

其中微信小程序的前端代碼與平時的vue不同，大家可以參考微信官方文檔。

總結

以上是生活随笔為你收集整理的微信小程序/vue通过阿里云上传图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。