微信小程序實現圖片上傳功能

前端： 微信開發者工具

后端：.Net

服務器：阿里雲

這里介紹微信小程序如何實現上傳圖片到自己的服務器上

前端代碼

data: {
productInfo: {}
},
//添加Banner
bindChooiceProduct: function () {
var that = this;

wx.chooseImage({
count: 3, //最多可以選擇的圖片總數
sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
var tempFilePaths = res.tempFilePaths;
//啟動上傳等待中...
wx.showToast({
title: '正在上傳...',
icon: 'loading',
mask: true,
duration: 10000
})
var uploadImgCount = 0;
for (var i = 0, h = tempFilePaths.length; i < h; i++) {
wx.uploadFile({
url: util.getClientSetting().domainName + '/home/uploadfilenew',
filePath: tempFilePaths[i],
name: 'uploadfile_ant',
formData: {
'imgIndex': i
},
header: {
"Content-Type": "multipart/form-data"
},
success: function (res) {
uploadImgCount++;
var data = JSON.parse(res.data);
//服務器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" }
var productInfo = that.data.productInfo;
if (productInfo.bannerInfo == null) {
productInfo.bannerInfo = [];
}
productInfo.bannerInfo.push({
"catalog": data.Catalog,
"fileName": data.FileName,
"url": data.Url
});
that.setData({
productInfo: productInfo
});

//如果是最后一張,則隱藏等待中
if (uploadImgCount == tempFilePaths.length) {
wx.hideToast();
}
},
fail: function (res) {
wx.hideToast();
wx.showModal({
title: '錯誤提示',
content: '上傳圖片失敗',
showCancel: false,
success: function (res) { }
})
}
});
}
}
});
}

 

后端上傳代碼(將文件上傳到服務器臨時文件夾內)

[HttpPost]
public ContentResult UploadFileNew()
{
UploadFileDTO model = new UploadFileDTO();
HttpPostedFileBase file = Request.Files["uploadfile_ant"];
if (file != null)
{
//公司編號+上傳日期文件主目錄
model.Catalog = DateTime.Now.ToString("yyyyMMdd");
model.ImgIndex = Convert.ToInt32(Request.Form["imgIndex"]);

//獲取文件后綴
string extensionName = System.IO.Path.GetExtension(file.FileName);

//文件名
model.FileName = System.Guid.NewGuid().ToString("N") + extensionName;

//保存文件路徑
string filePathName = System.IO.Path.Combine(CommonHelper.GetConfigValue("ImageAbsoluteFolderTemp"), model.Catalog);
if (!System.IO.Directory.Exists(filePathName))
{
System.IO.Directory.CreateDirectory(filePathName);
}
//相對路徑
string relativeUrl = CommonHelper.GetConfigValue("ImageRelativeFolderTemp");
file.SaveAs(System.IO.Path.Combine(filePathName, model.FileName));

//獲取臨時文件相對完整路徑
model.Url = System.IO.Path.Combine(relativeUrl, model.Catalog, model.FileName).Replace("\\", "/");
}
return Content(Newtonsoft.Json.JsonConvert.SerializeObject(model));
}
/// <summary>
/// 上傳文件 返回數據模型
/// </summary>
public class UploadFileDTO
{
    /// <summary>
    /// 目錄名稱
    /// </summary>
    public string Catalog { set; get; }
    /// <summary>
    /// 文件名稱，包括擴展名
    /// </summary>
    public string FileName { set; get; }
    /// <summary>
    /// 瀏覽路徑
    /// </summary>
    public string Url { set; get; }
    /// <summary>
    /// 上傳的圖片編號(提供給前端判斷圖片是否全部上傳完)
    /// </summary>
    public int ImgIndex { get; set; }
}
#region 獲取配置文件Key對應Value值
/// <summary>
/// 獲取配置文件Key對應Value值
/// </summary>
/// <param name="key"></param>
/// <returns></returns>
public static string GetConfigValue(string key)
{
return ConfigurationManager.AppSettings[key].ToString();
}
#endregion

 

設置配置文件上傳文件對應的文件夾信息

<appSettings>
<!--圖片臨時文件夾 絕對路徑-->
<add key="ImageAbsoluteFolderTemp" value="D:\Images\temp" />
<!--圖片正式文件夾 絕對路徑-->
<add key="ImageAbsoluteFolderFinal" value="D:\Images\product" />

<!--圖片臨時文件夾 相對路徑-->
<add key="ImageRelativeFolderTemp" value="http://192.168.1.79:9009/temp"/>
<!--圖片正式文件夾 相對路徑-->
<add key="ImageRelativeFolderFinal" value="http://192.168.1.79:9009/product"/>
</appSettings>

 

PS：上傳到服務器的臨時文件夾內，當用戶點擊保存才把這些文件移動到正式目錄下