c#后端 小程序上传图片

c#后端:

        /// <summary>
        /// 上传图片
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public ResultData uploadImage()
        {
            ResultData result = new ResultData();
            try
            {
                string path = "/tmp/";
                HttpPostedFile file = System.Web.HttpContext.Current.Request.Files["content"]; //对应小程序 name
                string parameters = string.Format("postData:{0}", file.ToString());

                //获取文件
                if (file != null)
                {
                    Stream sr = file.InputStream;        //文件流
                    Bitmap bitmap = (Bitmap)Bitmap.FromStream(sr);
                    path += file.FileName;
                    string currentpath = System.Web.HttpContext.Current.Server.MapPath("~");

                    bitmap.Save(currentpath + path);
                }
                result.status = 1;
                result.data = path;
            }
            catch (Exception vErr)
            {
                result.status = -1;
                result.detail = vErr.Message;
                return result;
            }
            return result;
        }
    public class ResultData
    {

        public int status { get; set; }

        public string data { get; set; }

        public string detail { get; set; }

    }

小程序前端:

upFiles.js

var chooseImage = (t, count) =>{
    wx.chooseImage({
        count: count,
        sizeType: [‘original‘, ‘compressed‘],
        sourceType: [‘album‘, ‘camera‘],
        success: (res) => {
            var imgArr = t.data.upImgArr || [];
            let arr = res.tempFiles;
            // console.log(res)
            arr.map(function(v,i){
                v[‘progress‘] = 0;
                imgArr.push(v)
            })
            t.setData({
                upImgArr: imgArr
            })

            let upFilesArr = getPathArr(t);
            if (upFilesArr.length > count-1) {
                let imgArr = t.data.upImgArr;
                let newimgArr = imgArr.slice(0, count)
                t.setData({
                    upFilesBtn: false,
                    upImgArr: newimgArr
                })
            }
        },
    });
}
var chooseVideo = (t,count) => {
    wx.chooseVideo({
        sourceType: [‘album‘, ‘camera‘],
        maxDuration: 30,
        compressed:true,
        camera: ‘back‘,
        success: function (res) {
            let videoArr = t.data.upVideoArr || [];
            let videoInfo = {};
            videoInfo[‘tempFilePath‘] = res.tempFilePath;
            videoInfo[‘size‘] = res.size;
            videoInfo[‘height‘] = res.height;
            videoInfo[‘width‘] = res.width;
            videoInfo[‘thumbTempFilePath‘] = res.thumbTempFilePath;
            videoInfo[‘progress‘] = 0;
            videoArr.push(videoInfo)
            t.setData({
                upVideoArr: videoArr
            })
            let upFilesArr = getPathArr(t);
            if (upFilesArr.length > count - 1) {
                t.setData({
                    upFilesBtn: false,
                })
            }
            // console.log(res)
        }
    })
}

// 获取 图片数组 和 视频数组 以及合并数组
var getPathArr = t => {
    let imgarr = t.data.upImgArr || [];
    let upVideoArr = t.data.upVideoArr || [];
    let imgPathArr = [];
    let videoPathArr = [];
    imgarr.map(function (v, i) {
        imgPathArr.push(v.path)
    })
    upVideoArr.map(function (v, i) {
        videoPathArr.push(v.tempFilePath)
    })
    let filesPathsArr = imgPathArr.concat(videoPathArr);
    return filesPathsArr;
}

/**
 * upFilesFun(this,object)
 * object:{
 *    url     ************   上传路径 (必传)
 *    filesPathsArr  ******  文件路径数组
 *    name           ******  wx.uploadFile name
 *    formData     ******    其他上传的参数
 *    startIndex     ******  开始上传位置 0
 *    successNumber  ******     成功个数
 *    failNumber     ******     失败个数
 *    completeNumber  ******    完成个数
 * }
 * progress:上传进度
 * success:上传完成之后
 */

var upFilesFun = (t, data, progress, success) =>{
    let _this = t;
    let url = data.url;
    let filesPath = data.filesPathsArr ? data.filesPathsArr : getPathArr(t);
    let name = data.name || ‘file‘;
    let formData = data.formData || {};
    let startIndex = data.startIndex ? data.startIndex : 0;
    let successNumber = data.successNumber ? data.successNumber : 0;
    let failNumber = data.failNumber ? data.failNumber : 0;
    if (filesPath.length == 0) {
      success([]);
      return;
    }
    const uploadTask = wx.uploadFile({
        url: url,
        filePath: filesPath[startIndex],
        name: name,
        formData: formData,
        success: function (res) {
            var data = res.data
            successNumber++;
            // console.log(‘success‘, successNumber)
            // console.log(‘success‘,res)
            // 把后台返回的地址链接存到一个数组
            let uploaded = t.data.uploadedPathArr || [];
            var da = JSON.parse(res.data);
            // console.log(da)
            if (da.code == 1001) {
                // ### 此处可能需要修改 以获取图片路径
                uploaded.push(da.data)

                t.setData({
                    uploadedPathArr: uploaded
                })
            }
        },
        fail: function(res){
            failNumber++;
            // console.log(‘fail‘, filesPath[startIndex])
            // console.log(‘failstartIndex‘,startIndex)
            // console.log(‘fail‘, failNumber)
            // console.log(‘fail‘, res)
        },
        complete: function(res){

            if (startIndex == filesPath.length - 1 ){
                // console.log(‘completeNumber‘, startIndex)
                // console.log(‘over‘,res)
                let sucPathArr = t.data.uploadedPathArr;
                success(sucPathArr);
                t.setData({
                    uploadedPathArr: []
                })
                console.log(‘成功:‘ + successNumber + " 失败:" + failNumber)
            }else{
                startIndex++;
                // console.log(startIndex)
                data.startIndex = startIndex;
                data.successNumber = successNumber;
                data.failNumber = failNumber;
                upFilesFun(t, data, progress, success);
            }
        }
    })

    uploadTask.onProgressUpdate((res) => {
        res[‘index‘] = startIndex;
        // console.log(typeof (progress));
        if (typeof (progress) == ‘function‘) {
            progress(res);
        }
        // console.log(‘上传进度‘, res.progress)
        // console.log(‘已经上传的数据长度‘, res.totalBytesSent)
        // console.log(‘预期需要上传的数据总长度‘, res.totalBytesExpectedToSend)
    })

}
module.exports = { chooseImage, chooseVideo, upFilesFun, getPathArr}

参考 https://www.cnblogs.com/flysem/p/9346759.html

原文地址:https://www.cnblogs.com/xubao/p/12128032.html

时间: 2024-10-24 16:56:41

c#后端 小程序上传图片的相关文章

Serverless,后端小程序的未来

自从2014年AWS推出Lambda服务后,Serverless一词越来越热,已经成为一种新型的软件设计架构,即Serverless Architecture.作为一种原生于公共云的架构,Serverless有什么优缺点?是否能应用于传统企业程序?是否适合私有云场景?是否像很多文章宣称的一样,会成为未来改变云计算的中坚力量?作为一名云计算行业的老兵,作者想在此文中分享一些自己的观点. 什么是Serverless Serverless并不神秘,用一个简单的例子就可讲明.我们设计了一个AI应用,可以

小程序上传图片到七牛

小程序上传图片非常简单,利用好2个API: wx.chooseImage wx.uploadFile /** * 上传图片 */ chooseImageUpload() { var that = this; wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: function (res) { that.tempFilePaths = r

超多慕课网实战教程破解自学教程百度云盘分享-Python/Java/前端后端/小程序/运维测试/人工智能

以下课程,需要的可以加我微*信:hgh813210,备注你需要的课程 Java企业级电商项目架构演进之路 Tomcat集群与Redis分布式百度云实战分享 前端成长必经之路 基于Storm构建实时热力分布项目实战 Spark Streaming实时流处理项目实战 以慕课网日志分析为例 进入大数据 Spark SQL 的世界 手工测试企业项目实践及面试提升 Webpack + React全栈工程架构项目实战精讲 深度学习之神经网络核心原理与算法 Android应用发展趋势必备武器 热修复与插件化

微信小程序上传图片到服务器实例

这一篇主要说头像 上传,以及修改保存的功能.本章节主要用的知识点有 1. wx.chooseImage 从本地相册选择图片或使用相机拍照. 2.wx.uploadFile 将本地资源上传到服务器. 3. 修改原来的小程序头像并保存,调用后台接口修改操作  第一步:我们要获取本地图片,官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html#wxchooseimageobject 我这里也贴出来了,不够

关于小程序上传图片到七牛的总结

最近在小程序中做到了头像上传这个功能,本来是挺简单的一个功能,但是这次是让我直接将图片上传到云储存,把返回的路径直接传给后台数据库存起来 emm这就很蛋疼了,一直都是处于你给我接口,我照着要求填数据就行了的那种模式,突然来一个这个操作 而且七牛的官方文档也有点难以理解,反正我是看了一下午,没看懂一堆参数,或者是初始化是怎么配置的 坑是踩的有点多吧,差点心态爆炸了,最后还是依靠的万能的百度解决的 记录一下,算是个总结吧 步骤: 1.  token还是必须要的,调取后台接口,获取到上传图片到七牛的许

微信小程序上传图片到COS腾讯云

功能需求:用户可以在评论中上传图片,图片保存到腾讯云COS上. 实现方法,微信小程序需要往后台传一个代表文件的参数file代表文件,借助MultipartFile获得文件的路径和文件名等信息. 关键实现代码: @RequestMapping(value = "/plugins/fileServer/fileservice/sales/admin", method = RequestMethod.POST) void postAdmin(@RequestParam(value = &qu

微信小程序上传图片(前端+PHP后端)

一.wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择上传图</button> </view> <image src='{{source}}' style='width:600rpx; height:600rpx' /> 二.js文件 Page({ /** * 页面的初始数据 */ data: { //初始化为空 source

微信小程序上传图片单张

wxml代码 <view> <image src='{{source}}' bindtap="uploadimg" style='width:200rpx;height:200rpx;background:red;'>点击选择上传图</image> </view> js代码 var app = getApp() Page({ /** * 页面的初始数据 */ data: { //初始化为空 source: '' }, /** * 上传图片

小程序上传图片,排队上传

//没有处理的wxml,但是有效果,可以简单试验一下 <view class='minbox1'> <text class='red wzgs'>*</text> <text class='wzgs'>照片(点击下面方框上传)</text> <text class='mis'>{{z}}/9</text> </view> <view class='left' wx:if="{{pics}}&qu