// 1-2 图片上传
// 删除图片
deleteImg(inputId, imgID) {
//删除图片ID
var dataId = $("#" + inputId).attr("data-id").split(',');
var dataIdNew = "";
var index;
if (dataId.length > 0) {
for (var i = 0; i < dataId.length; i++) {
if (dataId[i] != imgID) {
if (dataIdNew == "") {
dataIdNew += dataId[i];
} else {
dataIdNew += "," + dataId[i];
}
}else {
index=i
}
}
}
var imgarr = this.CorrectedPhotos.split(',')
var imgidNew = ""
if(imgarr.length>0){
for (let j = 0; j < imgarr.length; j++) {
if(j!=index){
if (imgidNew == "") {
imgidNew += imgarr[j];
} else {
imgidNew += "," + imgarr[j];
}
}
}
}
this.CorrectedPhotos = imgidNew
$("#" + inputId).attr("data-id", dataIdNew);
//删除图片
$("#img_" + imgID).remove();
},
// 预览图片
//点击放大预览图片
handlePreview(url) {
this.imgSrc[0] = url;
this.imgShow = true;
},
// 图片上传适配原生打包
getImage(inputId,UlId,tableId) {
plus.camera.getCamera().captureImage((p)=> {
plus.io.resolveLocalFileSystemURL(p, (entry)=> {
//图片压缩并且调用接口
this.resizeImage(entry.toLocalURL(),inputId,UlId,tableId);
}, (e)=> {
plus.nativeUI.toast("读取拍照文件错误:" + e.message);
});
}, (e)=> {
}, {
filter: 'image'
});
},
//再对图片进行压缩为270*270,再上传到服务器
resizeImage(src,inputId,UlId,tableId) {
plus.zip.compressImage(
{
src: src,
height: '1000px',
dst: "_doc/a.jpg",
overwrite: true,
format: 'jpg',
quality: 100
},
(e)=> {
var reader = new plus.io.FileReader();
reader.readAsDataURL(e.target);
reader.onloadend = (e)=> {
//图片上传及赋值
this.uploadimg(e.target.result.toString(),inputId,UlId,tableId);
};
},
(err)=> {
plus.nativeUI.alert('未知错误!',()=> {
});
}
);
},
//图片base,input控件,ul控件的ID
// 车巡照片上传:(images.tableName = "TB_CapacityCheck";images.fieldName = "ShowImage";)
// 智能场景照片上传:(images.tableName = "TB_SceneInfo";images.fieldName = "PunishImage";)
async uploadimg(imgurl,inputId,UlId,tableId){
//图片列表
var arr = new Array();
var images = new Object();
images.dataID = 0;
images.tableName = tableId;
images.fieldName = inputId;
images.image = imgurl.substr(imgurl.indexOf("base64,") + 7);
images.imageType = imgurl.split('/')[1].split(';')[0];
arr.push(images);
var dataSource = JSON.stringify(arr);
// 请求图片
await UploadImage(dataSource).then(res => {
var data=res.data;
this.saveImage(data.AttVisualPath[0])
var url = data.AttVisualPath[0].replace("\\", "/");
//ul控件
var $uploaderFiles = $("#"+UlId);
//拼接图片列表
var tmpl='<li id="img_'+data.AttachmentIds+'" style="width:80px;height:80px;margin:0 10px 10px 0px;position:relative;display:inline-block;float:left;border:1px solid #ccc;"><img style="width:100%;height:80px" src="'+url+'" οnclick="handlePreview(\''+url+'\')" alt=""/><div style="position: absolute;right: -10px;top: -10px;background: #ccc;border-radius: 20px;width: 20px;height: 20px;line-height: 20px;text-align: center;z-index:2000;" class="weui-uploader__file__div" οnclick="deleteImg(\''+inputId+'\',\''+data.AttachmentIds+'\')"><sapn>×</sapn></div></li>';
$uploaderFiles.append(tmpl);
// 龙进接口图片地址
if(inputId){
if (!this.CorrectedPhotos) {
this.CorrectedPhotos = data.AttVisualPath[0]
} else {
this.CorrectedPhotos += "," + data.AttVisualPath[0];
}
}
//添加多张图片ID
var data_id = $("#"+inputId).attr("data-id");
if (data_id) {
data_id += "," + data.AttachmentIds;
} else {
data_id = data.AttachmentIds;
}
$("#"+inputId).attr("data-id", data_id);
})
.catch(err => { console.log(err) });
},
saveImage(val){
if(!window.plus) return;
plus.gallery.save(val, ()=> {
},()=>{
plus.nativeUI.alert("保存失败");
});
},
AndroidStuido打包 图片上传
最新推荐文章于 2023-12-23 08:30:00 发布