微信小程序?qū)崿F(xiàn)圖片上傳功能
本文實例為大家分享了微信小程序?qū)崿F(xiàn)圖片上傳功能的具體代碼,供大家參考,具體內(nèi)容如下
前端:微信開發(fā)者工具
后端:.Net
服務(wù)器:阿里云
這里介紹微信小程序如何實現(xiàn)上傳圖片到自己的服務(wù)器上
前端代碼
data: {
productInfo: {}
},
//添加Banner
bindChooiceProduct: function () {
var that = this;
wx.chooseImage({
count: 3, //最多可以選擇的圖片總數(shù)
sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖,默認二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的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);
//服務(wù)器返回格式: { "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) { }
})
}
});
}
}
});
}
后端上傳代碼(將文件上傳到服務(wù)器臨時文件夾內(nèi))
[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>
/// 上傳文件 返回數(shù)據(jù)模型
/// </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對應(yīng)Value值
/// <summary>
/// 獲取配置文件Key對應(yīng)Value值
/// </summary>
/// <param name="key"></param>
/// <returns></returns>
public static string GetConfigValue(string key)
{
return ConfigurationManager.AppSettings[key].ToString();
}
#endregion
設(shè)置配置文件上傳文件對應(yīng)的文件夾信息
<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:上傳到服務(wù)器的臨時文件夾內(nèi),當(dāng)用戶點擊保存才把這些文件移動到正式目錄下。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信js-sdk預(yù)覽圖片接口及從拍照或手機相冊中選圖接口用法示例
這篇文章主要介紹了微信js-sdk預(yù)覽圖片接口及從拍照或手機相冊中選圖接口用法,較為詳細的分析了預(yù)覽圖片接口及與拍照或手機相冊中選圖接口的功能、調(diào)用方法與相關(guān)使用技巧,需要的朋友可以參考下2016-10-10
javascript讓setInteval里的函數(shù)參數(shù)中的this指向特定的對象
話說阿里巴巴今年的校園招聘有一道題目考了一個知識點,那就是setInterval的參數(shù)函數(shù)里的this指向.2010-01-01
webpack-bundle-analyzer?插件配置使用方法
webpack-bundle-analyzer?是?webpack?的插件,需要配合?webpack?和?webpack-cli?一起使用,這篇文章主要介紹了webpack-bundle-analyzer?插件配置,需要的朋友可以參考下2023-02-02
JavaScript中鏈?zhǔn)秸{(diào)用之研習(xí)
方法鏈一般適合對一個對象進行連續(xù)操作(集中在一句代碼)。一定程度上可以減少代碼量,缺點是它占用了函數(shù)的返回值。2011-04-04

