uniapp实现图片上传功能

最近在自己写一个uniapp的项目，后台用的express,刚好遇到了上传图片到服务器的功能，这里总结一下。

1.前端部分

首先是要打开本地相册选择图片，用的api是uni.chooseImage

uni.chooseImage({
    count: 1, //上传图片的数量，默认是9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], //从相册选择
    success: function (res) {
        const tempFilePaths = res.tempFilePaths;    //拿到选择的图片，是一个数组
    }
});

接着是上传图片，用到的api是uni.uploadFile

        uni.chooseImage({
          count:1,
          success:(res)=>{
            const tempFilePaths = res.tempFilePaths;
            uni.uploadFile({
              url:'http://localhost:3000/users/upload',		//post请求的地址
              filePath:tempFilePaths[0],
              name:'avatar',	
              formData: {
                'username': this.userInfo.username  //formData是指除了图片以外，额外加的字段
              },
              success: (uploadFileRes) => {
                //这里要注意，uploadFileRes.data是个String类型，要转对象的话需要JSON.parse一下
                var obj = JSON.parse(uploadFileRes.data);
				...
              }
            })
          }

2.后端部分

后端上传文件到服务器用的是multer

const multer = require('multer');
let storage = multer.diskStorage({
    //配置上传文件需要存放的位置
    destination:function(req,file,cb){
        cb(null,path.join(__dirname,'../public/images/avatar'));
    },
    //配置文件名
    filename:function (req,file,cb) {
        let time = Date.now();
        cb(null, Date.now() + "-" + file.originalname);
    }
});
//创建一个multer对象用来处理文件上传
//multer 可以帮我们解析 content-type:mulipart/form-data这种方式提交的请求数据
var upload = multer({
    storage:storage
});

上传一张图片的时候

//single里的参数是name，也就是传过来的文件的key值，也可以叫name值
router.post('/upload',upload.single('avatar'),async (req, res)=>{
    let newAvatar = req.file.filename;  //获取存放完成的新的文件名
    let user = req.body;
	...
});