uniapp上传图片
这个选择到上传到显示的步骤。
·
// 选择站点相关图片 这个是点击事件传入参数0 或者 1
chooseSiteImg(imgType) {
let that = this;
uni.chooseImage({
count: imgType == 0 ? 1 : 3,
success(e) {
let imgList = e.tempFilePaths.map((item, index) => {
return {
uri: item,
name: 'img' + index
};
});
//这个是下面的函数的所需的 对象 0 或者 1
that.uploadSiteImg(imgList, imgType);
},
fail() {
uni.showToast({
icon: 'error',
title: '取消上传'
});
}
});
},
// 上传图片发送后台
uploadSiteImg(imgList, imgType) {
let that = this;
console.log(imgList, that.stationId, '上传图片的类型', imgType, '上传图片地址', `${getApp().$url}/jm/stationFile/addPicture/${imgType}/${that.stationId}`);
uni.uploadFile({
url: `${getApp().$url}/jm/stationFile/addPicture/${imgType}/${that.stationId}`,
files: imgList,
success(fileRes) {
console.log('上传图片发送后台fileRes', fileRes);
let data = JSON.parse(fileRes.data);
if (data.code == 0) {
uni.showToast({
icon: 'success',
title: '图片上传成功',
duration: 3000
});
// 这个是 别的 从别处传入 由onLoad(id) 接收
that.getGoodDetailMsg(that.stationId);
} else {
uni.showToast({
icon: 'error',
title: '图片上传失败'
});
}
},
fail() {
uni.showToast({
icon: 'error',
title: '上传图片失败'
});
}
});
}
},
// 获取监测点详情页数据
async getGoodDetailMsg(id) {
let res = await getApp().$myRequest({
url: `${getApp().$url}/jm/station/getStationById?id=${id}`
});
if (res.data.code == 0) {
this.stationDO = res.data.data[0].stationDO;
this.sandoldStationDO = res.data.data[0].stationDO;
this.sandnewStationDO = JSON.parse(JSON.stringify(this.sandoldStationDO));
this.sendselectExpress = this.sandoldStationDO.name;
let { stationDO, stationFileDOList } = res.data.data[0];
this.station_name = stationDO.name; // 监测名称
this.station_id = stationDO.siteNumber; // 监测点站号
this.station_address = stationDO.address; // 监测点地址
this.station_coordinate = parseFloat(stationDO.coordinateX).toFixed(6) + '/' + parseFloat(stationDO.coordinateY).toFixed(6); // 坐标经纬度
this.station_status = stationDO.stateName ? stationDO.stateName : '暂无'; // 监测点状态
this.station_type = stationDO.typeName ? stationDO.typeName : '暂无'; // 监测点类型
this.device_type = stationDO.equipmentTypeName ? stationDO.equipmentTypeName : ''; // 设备类型
this.realm_name = stationDO.realmName.split(':')[0]; // 域名
this.realm_port = stationDO.realmName.split(':')[1]; // 端口
this.sim_number = stationDO.simNumber; // sim卡号
this.owner = stationDO.ownerName == null ? '' : stationDO.ownerName; // 用户类型
this.project_name = stationDO.project == null ? '' : stationDO.project; // 项目名称
// 存储地址经纬度
this.oldLongidute = stationDO.coordinateX;
this.oldLatidute = stationDO.coordinateY;
// 调用运维记录接口, 需要传入站点名称为data
this.devOps();
// img_list
this.img_list = [];
if (stationFileDOList.length > 0) {
this.stationFileList = stationFileDOList;
stationFileDOList.forEach(item => {
this.img_list.push(getApp().$url + item.uuidfilename);
});
} else {
this.img_list.push(getApp().$url + '/static/noImg.png');
}
}
},
这个选择到上传到显示的步骤
上传到后端接口
<template>
<view>
我是上传
<view class="upload-img">
<image src="../../static/a.jpg" @click="onGetImgClick"></image>
<view class="ac" @click="save">12121212</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imageList: [],
datsa: [{
id: 1,
name: 1,
prc: ''
}]
}
},
methods: {
onGetImgClick() {
let that = this
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
console.log(res.tempFilePaths, '图片的本地文件路径列表');
that.imageList.push(res.tempFilePaths[0])
}
});
},
save() {
// let aa = {
// id: 1
// }
let that = this
uni.uploadFile({
//本地的地址
url: `${getApp().$url}/jmgis/workOrders/updateWorkOrder`, //上传图片的地址
filePath: that.imageList[
0], //这里是图片的本地文件路径列表(选择图片成功的时候可以拿到,在上边的success回调中res.tempFilePaths即可拿到)
name: 'w', //上传的名字叫啥都行
// formData: aa,
headers: {
'Content-Type': 'multipart/form-data',
Cookie: 'JSESSIONID=' + uni.getStorageSync('loginCookies')
},
success(res) {
console.log("res", res);
//上传成功的回调
// 这个res是后端返回给你上传成功的数据里边一般会有上传之后图片的在线路径
}
})
console.log("this.imageList", that.imageList);
}
}
}
</script>
<style>
</style>
更多推荐
已为社区贡献3条内容
所有评论(0)