微信小程序 删除服务器图片,微信小程序之图片选择/上传/预览/删除

微插新，都次过是宗现制的前搭待个断前能绿和信小程序选择图片、预览图片、长按删除图片以及上直分调浏器代，刚求的一学础过功互有解小久宗点差维含数如数传图片。

wxml部分遇新是直朋能到：

上传

js部分:

Page({

data: {

tempFilePaths: [],//图片路径

addState: false,//添加图片按钮的状态

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

},

chooseImage: function () {//选择图片

var that = this;

wx.chooseImage({

count: 9,//最多添加9张

sizeType: ['original', 'compressed'],

sourceType: ['album', 'camera'],

success(res) {

// tempFilePath可以作为img标签的src属性显示图片

const tempFilePaths = res.tempFilePaths;

var State = false;

if (res.tempFilePaths.length = 9) {//当选择图片等于9张时，则隐藏添加图片按钮

State = true;

} else {//当选择图片小于9张时，则显示添加图片按钮

State = false;

}

that.setData({

tempFilePaths: res.tempFilePaths,

addState: State

})

}

});

},

previewImage: function (e) {//预览图片

var that = this;

wx.previewImage({

current: e.currentTarget.id, // 当前显示图片的http链接

urls: that.data.tempFilePaths // 需要预览的图片http链接列表

})

},

deleteImage: function (e) {//删除图片

var that = this;

var images = that.data.tempFilePaths;

var index = e.currentTarget.dataset.index;//获取当前长按图片下标

wx.showModal({

title: '提示',

content: '确定要删除此图片吗？',

success: function (res) {

if (res.confirm) {

console.log('点击确定了');

images.splice(index, 1);//通过splice方法删除splice(index,1),删除一个当前元素

var State = false;//删除图片，图片数量肯定小于9，So改变添加图片按钮的状态，使之显示

that.setData({

tempFilePaths: images,

addState: State

});

} else if (res.cancel) {

console.log('点击取消了');

return false;

}

}

})

},

upload: function () {//上传图片到服务器

var that = this;

console.log("img", that.data.tempFilePaths);

wx.uploadFile({

url: 'xxx',//服务器地址

filePath: that.data.tempFilePaths,//图片路径

name: 'file',

formData: {

'imgs': 'imgs'

},

success(res) {

const data = res.data

}

});

}

})

本文来源于网络：查看 >https://blog.csdn.net/Skyline_ding/article/details/83271593