微信小程序实现图片上传功能
前端代码
- 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>