解决小程序图片上传问题

1
2
3
4
5
<view class="weui-uploader__input-box">
<view class="weui-uploader__input" bindtap="chooseImage"></view>
</view>
<image class="weui-uploader__img" src='{{url}}' mode="aspectFill" />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const upload = require('../../utils/upload.js')
Page({
data: {
url:'',
},
chooseImage: function (e) {
var that = this;
wx.chooseImage({
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
let tempFilePaths = res.tempFilePaths
upload("/shop/uploadImg",tempFilePaths).then(res=>{
let data = JSON.parse(res.data)
console.log(data)
that.setData({
url:`http://172.20.10.7:8080/upload/${data.message}`
})
})
}
})
},
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 上传文件网络请求
/**
* path: 接口地址(相对)
* tempFilePaths: 上传文件数组 []
* data:携带的数据对象 {}
*/
module.exports = function(path,tempFilePaths,data){
return new Promise((resolve,reject) => {
wx.uploadFile({
url:
'自己服务器的接口地址',
//接口地址
filePath: tempFilePaths[0],
name: 'file',
formData: data,
//这里有一个坑！巨坑！
//成功返回的data数据是一个字符串，所以要自己转换成JSON数据
success: resolve,
// 请求失败执行fail操作
fail: () => {
reject()
wx.showModal({
showCancel: false,
title: '服务器繁忙'
})
}
})
})
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
package com.wyf.controller;
import java.io.File;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import com.wyf.po.Result;
@Controller
public class UploadFileCon {
/**
* 图片上传,解决小程序端临时图片问题
*
* @param request
* @param response
* @return
*/
@RequestMapping("/shop/uploadImg")
@ResponseBody
public Result uploadImg(HttpServletRequest request, HttpServletResponse response) {
MultipartHttpServletRequest req = (MultipartHttpServletRequest) request;
MultipartFile multipartFile = req.getFile("file");
// 获取上传文件原始名
String originalName = multipartFile.getOriginalFilename();
// 设置上传文件的保存路径
String realPath = "G:/安装包/Tomcat/安装包/Tomcat 7.0/webapps/upload";
String newFileName = "";
try {
File dir = new File(realPath);
// 如果保存文件的地址不存在，就先创建目录
if (!dir.exists()) {
dir.mkdir();
}
// 使用UUID重新命名上传的文件名 + 文件的后缀名
newFileName = "shop_" + UUID.randomUUID() + originalName.substring(originalName.lastIndexOf("."));
File file = new File(realPath, newFileName);
// 使用multipartFile接口的方法上传文件到指定位置
multipartFile.transferTo(file);
return new Result(true, newFileName);
} catch (Exception e) {
e.printStackTrace();
return new Result(false, "操作异常");
}
}
}

1
2
3
<?xml version="1.0" encoding="UTF-8"?>
<Context docBase="G:安装包Tomcat安装包Tomcat 7.0webappsupload" reloadable="true"> </Context>