uniapp实现图片上传功能
最近在自己写一个uniapp的项目,后台用的express,刚好遇到了上传图片到服务器的功能,这里总结一下。1.前端部分首先是要打开本地相册选择图片,用的api是uni.chooseImageuni.chooseImage({count: 1, //上传图片的数量,默认是9sizeType: ['original', 'compressed'], //可以指定是原图还是压...
·
最近在自己写一个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;
...
});
更多推荐
已为社区贡献1条内容
所有评论(0)