首先来看一个效果图,点击确定按钮将信息提交到后台。
不墨迹了,直接上代码:
// 第一个image标签就是从本地上传的图片
// 第二个image标签是用来显示默认图片的
<view class="receiving">
<text>微信收款码</text>
<view class="money_imag_code fl-jus-sp" @tap="addImage">
<image v-if="src" :src="src" style="height: 100%;width: 100%;"></image>
<image v-else class="image" src="../../../static/img/category/xiangji1.png"></image>
</view>
</view>
data() {
return {
src1: '', // 提交到后台的图片信息
src: '', // 用来在前端展示的图片,如上面图片中显示的一样
}
}
逻辑代码如下:
addImage() {
var that = this;
// 从本地相册选择图片或使用相机拍照。
uni.chooseImage({
count: 10, //最多可以选择的图片张数,默认9
//album 从相册选图,camera 使用相机,默认二者都有。
sourceType: ['album'],
success: function(res) {
//获取图片信息。
uni.getImageInfo({
src: res.tempFilePaths[0],
success: function(image) {
that.src = (res.tempFilePaths[0]);
console.log(that.src); //打印出图片信息,在浏览器上打开就是你上传的图片
//将本地资源上传到开发者服务器,客户端发起一个 POST 请求,其中 content-type 为 multipart/form-data
uni.uploadFile({
//开发者服务器 url
url: _this.global.baseUrl + 'common/upload',
//获取要上传文件资源的路径。
filePath: res.tempFilePaths[0],
//文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
name: 'file',
//HTTP 请求 Header, header 中不能设置 Referer。
header: {
token: uni.getStorageSync('token')
},
//成功的回调
success: uploadFileRes => {
//获取图片信息 网站域名 + res1.data.url就是一个图片的完整路径了
var res1 = JSON.parse(uploadFileRes.data);
that.src1 = res1.data.url;
console.log(that.src1)
}
})
}
})
}
})
}
到此结束!