uni-app 小程序上传图片，适配H5

梦里梦外; 2022-12-01 05:20 181阅读 0赞

直接上代码 ：整体代码

uni.chooseImage({
    				    success:  (res) => {
    						console.log('res:',res);
    						const tempFilePaths = res.tempFilePaths;
    						console.log('tempFilePaths[0]:',tempFilePaths[0]);
    						if(!uni.getStorageSync('token')){
    							uni.showToast({
    							    title: '上传失败，请重新登录再尝试',
    								icon:'none',
    							    duration: 2000
    							});
    							
    							setTimeout(() => {
    								uni.reLaunch({
    									url:'./setupaccount'
    								})
    							},2000)
    							return false;
    						}
    						uni.uploadFile({
    							url: this.upload, 
    							//#ifdef H5
    							header: {
    								// 'Content-Type': 'application/x-www-form-urlencoded',
    								// 'Access-Control-Allow-Origin':'*',
    								// "Content-Type": "multipart/form-data",
    								'accessToken': uni.getStorageSync('token'),
    							},
    							files:[
    								{
    									name:'file',
    									file:res.tempFiles[0],
    									uri:tempFilePaths[0],
    								}
    							],
    							//#endif
    							//#ifdef MP
    							header: {
    								"Content-Type": "multipart/form-data",
    								'accessToken': uni.getStorageSync('token')
    							},
    							filePath: tempFilePaths[0],
    							name: 'file',
    							formData: {
    								'project': 'hrj',
    								'host': '127'
    							},
    							//#endif
    							success: (uploadFileRes) => {
    								console.log(JSON.parse(uploadFileRes.data));
    								let res = JSON.parse(uploadFileRes.data);
    								if(res.code == 0){
    									uni.showToast({
    									    title: '上传成功',
    									    duration: 2000
    									});
    									this.cartakepictureslist[index].img = res.fileId;
    									console.log(this.cartakepictureslist[index].fileId);
    								}else {
    									uni.showToast({
    									    title: res.msg,
    										icon:'none',
    									    duration: 2000
    									});
    									
    									setTimeout(()=>{
    										uni.navigateTo({
    											url:'./login'
    										})
    									},2000)
    								}
    								
    							},
    							fail:(e) => {
    								uni.showToast({
    								    title: '网络出错',
    									icon:'none',
    								    duration: 2000
    								});
    							}
    						});
    				    }
    				});

### 第一步：[uni.chooseImage][]  ###

从本地相册选择图片或使用相机拍照。 官方文档：[https://uniapp.dcloud.io/api/media/image?id=chooseimage][uni.chooseImage]

### 第二步： 得到图片信息后可以直接掉接口了： ###

这里用的 [uni.uploadFile][]   官方文档： [https://uniapp.dcloud.io/api/request/network-file?id=uploadfile][uni.uploadFile]

本章重点：小程序和H5 上传参数不同之处

参数：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70][]

首先小程序  ：必传的

<table> 
 <tbody> 
  <tr> 
   <td> <p>&nbsp;url :&nbsp; 开发者服务器&nbsp;</p> <p>filepath :&nbsp;要上传文件资源的路径。</p> <p>name :&nbsp;文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容&nbsp; (默认file) 。</p> </td> 
  </tr> 
 </tbody> 
</table>

uni.uploadFile（{
        url : 'www.xxxxxx.com' // 
        
        header: {
    	    "Content-Type": "multipart/form-data",
    		'accessToken': uni.getStorageSync('token')
    	},
    	 filePath: tempFilePaths[0],
    	name: 'file',
    	formData: {
    		'project': 'hrj',
    		'host': '127'
    	},
    
        success:(uploadFileRes) => {
            
        }
    
    }）

小程序上传图片跟着官方示例基本没问题；

H5端的 ： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70 1][]

官方既然给了这个参数 ， 说明还是有其用途的。本次困扰了我很久，在网上各种查资料，也有其他解决方法，但是都太片面了。然后仔细看了一下文档， 就着手试了一试，就成功了：

H5 端用 files 来传图片，注意：使用files 了后，filepath 和 name 两参数就失效了，这也是必然的。

files 里面 也包括了这两参数 ：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70 2][]

### 这里注意，需要仔细点看 ， 文件的本地地址 参数 是 uri  uri  uri  ！！！ ###

并不是    u  r  l   ，这地方很多人栽坑了里头了，错吧 U R I 当做  U R L 。

[uni.chooseImage]: https://uniapp.dcloud.io/api/media/image?id=chooseimage
[uni.uploadFile]: https://uniapp.dcloud.io/api/request/network-file?id=uploadfile
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70]: /images/20221123/88b9ad88c03542719283675ce9fcfb6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70 1]: /images/20221123/2d1b5a9a946342f59548475a927adb52.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70 2]: /images/20221123/5f0ea8fa562149109989766d54d11b91.png