小程式上傳圖片
阿新 • • 發佈:2019-01-03
data: {
evalList: [{ tempFilePaths: [], imgList: [] }]
},
//新增圖片 joinPicture: function (e) { var index = e.currentTarget.dataset.index; var evalList = this.data.evalList; var that = this; var imgNumber = evalList[index].tempFilePaths; if (imgNumber.length >= 3) { wx.showModal({ title: '', content: '最多上傳三張圖片', showCancel: false, }) return; } wx.showActionSheet({ itemList: ["從相簿中選擇", "拍照"], itemColor: "#f7982a", success: function (res) { if (!res.cancel) { if (res.tapIndex == 0) { that.chooseWxImage("album", imgNumber); } else if (res.tapIndex == 1) { that.chooseWxImage("camera", imgNumber); } } } }) }, chooseWxImage: function (type, list) { var img = list; var len = img.length; var that = this; var evalList = this.data.evalList; wx.chooseImage({ count: 3, sizeType: ["original", "compressed"], sourceType: [type], success: function (res) { var addImg = res.tempFilePaths; var addLen = addImg.length; if ((len + addLen) > 3) { for (var i = 0; i < (addLen - len); i++) { var str = {}; str.pic = addImg[i]; img.push(str); } } else { for (var j = 0; j < addLen; j++) { var str = {}; str.pic = addImg[j]; img.push(str); } } that.setData({ evalList: evalList }) that.upLoadImg(img); }, }) }, upLoadImg: function (list) { var that = this; this.upload(that, list); }, //多張圖片上傳 upload: function (page, path) { var that = this; var curImgList = []; for (var i = 0; i < path.length; i++) { wx.showToast({ icon: "loading", title: "正在上傳" }), wx.uploadFile({ url: app.globalData.subDomain + '/API/AppletApi.aspx',//介面處理在下面有寫 filePath: path[i].pic, name: 'file', header: { "Content-Type": "multipart/form-data" }, formData: { douploadpic: '1' }, success: function (res) { curImgList.push(res.data); var evalList = that.data.evalList; evalList[0].imgList = curImgList; that.setData({ evalList: evalList }) if (res.statusCode != 200) { wx.showModal({ title: '提示', content: '上傳失敗', showCancel: false }) return; } var data = res.data page.setData({ //上傳成功修改顯示頭像 src: path[0] }) }, fail: function (e) { wx.showModal({ title: '提示', content: '上傳失敗', showCancel: false }) }, complete: function () { wx.hideToast(); //隱藏Toast } }) } }, //刪除圖片 clearImg: function (e) { var index = e.currentTarget.dataset.index; var evalList = this.data.evalList; var img = evalList[0].tempFilePaths; img.splice(index, 1); this.setData({ evalList: evalList }) this.upLoadImg(img); },
//提交發布 submitClick: function (e) { var evalList = that.data.evalList; var imgList = evalList[0].imgList; var imgPort = "";//圖片地址,多張以逗號分割 if (imgList.length != 0) { for (var j = 0; j < imgList.length; j++) { imgPort = imgList[j] + "," + imgPort; } } else { imgPort = ""; } },
小程式前端處理 <view class="educt_hasupload_pic" wx:for="{{evalList[0].tempFilePaths}}" wx:key="index"> <image src="{{item.pic}}" class="upload"></image> <image src="../../images/deltel.png" bindtap='clearImg' data-index="{{index}}" class="deltel"></image> </view> <view class="educt_upload_add" bindtap="joinPicture" data-index="{{0}}"> <image src="../../images/add.png"></image> </view>
/// <summary>
/// 上傳圖片或檔案介面處理
/// </summary>
private void douploadfile()
{
string ret = "";
try
{
System.Web.HttpFileCollection flist = Request.Files;
//如果集合的數量大於0
if (flist.Count > 0)
{
foreach (string str in flist)
{
HttpPostedFile FileSave = flist[str]; //用key獲取單個檔案物件HttpPostedFile
//在檔名前面加上時間,以防重名
string imgName = DateTime.Now.ToString("yyMMddHHmmssfffff") + FileSave.FileName;
//檔案儲存相對於當前應用目錄的虛擬目錄
string path = "/upload/image/";
//獲取相對於應用的基目錄,建立目錄
string imgPath = System.AppDomain.CurrentDomain.BaseDirectory + path; //通過此物件獲取檔名
StringHelper.CreateDirectory(imgPath);
//檔案儲存的目錄和名稱
string filepath = imgPath + imgName;
FileSave.SaveAs(filepath);
ret += 網址+ path + imgName;//圖片地址,包括http
}
}
}
catch (Exception e)
{
Response.Write(e.Message);
}
Response.Write(ret);
}
效果如下圖: