uni-app分享图片压缩上传DEMO，带服务器端。支持H5+的拍照和选择相册功能进行上传。

发布于 1周前 作者 yuanlaile 来自 Uni-App

uni-app分享图片压缩上传DEMO，带服务器端。支持H5+的拍照和选择相册功能进行上传。

代码示例

引用的JS库

图片选择与处理

// 拍照添加文件  
function getImage() {  
    var cmr = plus.camera.getCamera();   
    cmr.captureImage( function ( p ) {          
        plus.io.resolveLocalFileSystemURL( p, function ( entry ) {      
            if(files.length < 2){   
                  var localurl = entry.toLocalURL();  
                  appendFile(localurl);  
                    }   
                });     
    },function( error ) {  
            alert( "Capture image failed: " + error.message );  
        }    
    );     
}   

// 从相册添加文件   
function appendByGallery(){  
    plus.gallery.pick(function(path){  
         appendFile(path);  
    });  
}

图片处理

// 添加文件  
var f1=null;  
function appendFile(path){  
  var img = new Image();  
        img.src = path;        
        img.onload = function () {  
            var that = this;  
            var w = that.width,  
                h = that.height,  
                scale = w / h;   
                w = 480 || w;              
                h = w / scale;  

            var canvas = document.createElement('canvas');  
            var ctx = canvas.getContext('2d');  
            $(canvas).attr({width : w, height : h});  
            ctx.drawImage(that, 0, 0, w, h);  
            var base64 = canvas.toDataURL('image/jpeg', 1 || 0.8 );  
            f1 = base64;  
            var pic = document.getElementById("x");      
            pic.src = base64;                    
    }  
}

图片上传

// 上传文件  
function upload(){   
     var wt=plus.nativeUI.showWaiting();  
     var url = '后台地址';  
     var dataType ='json';  
     var data = {   
         files1:f1       
     };      
     $.post(url, data, success, dataType);                            
}  

// 成功响应的回调函数  
var success = function(response) {     
    plus.nativeUI.closeWaiting();  
    if(response != null){  
        alert("上传成功");   
    }  
}

服务器端处理

$s = dirname(__FILE__); 
$time = time();        
$files = $_POST['files1'];  
$files1 = substr($files1, 22);  
$tmp  = base64_decode($files1);  
$fp = $s . "/uploads/" . $time . ".jpg";  
file_put_contents($fp, $tmp);  
echo 1;

其他注意事项

  • 拍摄后图片可能会方向不对，可以参考楼下评论中的解决方案。

文件下载


Harmonyos Next教程
102 回复

现在插件地址已经更新到localResizeIMG3 原来的库在安卓上照片会有转动90度的问题，今天早上我已经修正，并提交给作者了，现在已经合并了代码。 大家可以下载过来测试一下 // 从相册添加文件

    function pickUpFromGallery() {  
        plus.gallery.pick(function(path) {  
          plus.io.resolveLocalFileSystemURL(path, function(entry){  
            var localURL = entry.toLocalURL();  
            //document.getElementById('resImg').src = localURL;  
            compressImg(localURL); //处理图片的地方  
          }, function(e){  
            console.log("失败：" + error.message);  
    }, {  
      filename: "_doc/camera/",  
      index: 1  
    });  
        });  
    }

function compressImg(path) {
console.log(‘开始压缩:’ + path);
lrz(path, {width:300}, function(result) {
document.getElementById(‘compressedImg’).src = result.base64;
console.log(‘文件大小：’ + (Math.floor(result.base64Len / 1024)) + ‘K’);
});
}


我感觉这个插件 速度好慢 压缩 压缩一次要8s

请问这个lrz压缩后只能先得到base64再转换成blob对象上传吗？可以直接得到文件对象么

链接地址失效了，能重新发一下么？急求转动90度的答案！感谢。。

你这个拍照在iphone里面就不生效了哦，应该这样就可以了 var cmr = plus.camera.getCamera();
cmr.captureImage(function§ {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
appendFile(entry.fullPath); //处理图片的地方
}, function(e) {
plus.nativeUI.alert(e.message);
});
}, function(e) {}, {
filename: “_doc/camera/”
});

哈哈 ，是滴啊。我今天刚改了。

我是直接这样。 var localurl = entry.toLocalURL(); appendFile(localurl);

回复 多串君:哦？你已经改了？哈哈～～～

回复 伟子:我改过之后为什么在IPHONE上还是获取不到拍照后的图片，本地的可以取到。

在iphone上压缩后，图片出现变形，高度没按等比生成，全部挤在顶部了

C#服务器端

                    string image1Name = WebHelper.GetRequest("Image1Name", string.Empty);  
                    string image1Data = WebHelper.GetRequest("Image1Data", string.Empty);  
                    if (!String.IsNullOrEmpty(image1Name) && !String.IsNullOrEmpty(image1Data) && image1Data.Length > 23)  
                    {  
                        image1Data = image1Data.Substring(23);  

                        //大图  
                        string path = UIHelper.GetAbsoultFolder(UIHelper.GetUploadRelativePath() + image1Name);  
                        ImageProcessor.SaveImageFromBase64String(image1Data, path);  

                    }<br>

能全面给点源码吗？

谢谢分享，好东西要顶。

啊哈哈，有用就好。

不错的代码，很有用。

你好问下，关于手机拍照后显示的是旋转90度的怎么处理，谢谢了。

多张图片怎么办。。。遍历for循环好像不起效。。

我的想法，选择图片和拍照都是一次一个，点一次i=0;file[i]=base64,i++;这样就能循环把base64放入数组了。数组传到后台，循环解码

还有防止图片上传到服务器不是正着的，应该在Canvas处理一下，判断图片拍摄时的角度，我是用canvasResize做的

源码地址贴出来吧~

哥们，有代码吗？求share

http://cd2014.porsche-events.cn/ 终于找到了以前做的Demo

网页很漂亮啊 是微信端吗，？ 如何判断图片拍摄时的角度，有代码吗

回复 h5_学习者:里面已经判断了拍摄的角度，也压缩了

回复 伟子:你好，保时捷的那个代码，如何处理的拍摄角度没有看的很明白，请问有没有关于拍摄角度的说明？

这个貌似是通过type=file实现的？ 直接给图片路径貌似无法实现。

回复 伟子:路径有问题了，可不可以给个新地址给我，谢谢！

多张图片怎么办啊，又不好循环添加data数据。。只能写死么 var data = { numimg: uploadImgArr.length.toString(), subject: document.getElementById(“key”).value, author: returnItem(“useracc”), authorid: returnItem(“uid”), sid: returnItem(“sessionid”), message: document.getElementById(“message”).value, img1: uploadImgArr[0].pic, img2: uploadImgArr[1].pic, img3: uploadImgArr[2].pic };

你这个为什么后台接收不到数据，提示undefined index club


我没有遇到这个问题，我帮你查了一下。看这个能不能解决http://www.jb51.net/article/30328.htm

接收不到数据的话，先随便传点什么，看看是不是传递数据出错了。

好的，谢谢，我试试

回复 多串君:用mui.post和上面的例子可以，但是用5+里的这个就出现上面的那个提示，怎么解决

//发送POST请求 function MyXMLHttpRequest(myurl, mydata, callback) {

为什么我用你的代码，在苹果手机上图片的方向会转90度啊，求解？

你看看楼上的伟子的评论， 他提出了解决办法。我没有对图片方向作调整。

500K 太大了

我做的是压缩到500K了，上面图片处理的地方 //生成比例 var w = that.width, h = that.height, scale = w / h; w = 480 || w; //这里的480像素 你觉得还是大，你可以设置320,240 不过太小图片就破相了 h = w / scale;

多谢答复，头疼呢，等着官方完善API也没消息。我在考虑用你这方法来一遍，还是直接换回phonegap

500K 太大了 流量伤不起
如果可以设置图片质量，大小缩小在100kb以内就好了。

html5画布不给力啊，一张图片500k 1920*1080 压缩后更大了！ 用的方法 一样：
ctx.drawImage(img,0,0,1920,1080,0,0,destw,desth);
用C#就能做到几十k，还清晰，靠，html5 怎么搞的这么挫！

我都可以保存为jpg啊

$files =$_POST[‘files1’]; $files1 = substr($files1,22); //这代码坑了不会PHP的同学

我压缩成20kb都能看。

在iphone js压缩图片有问题，encode 有大小限制，我在iPhone5上测试，拍照有有10几兆，最后encode 会丢失数据。 http://stackoverflow.com/questions/26152652/ios-html5-canvas-todataurl

后台我用的是.net写的 我通过这种方式为什么拿不到上传的文件？我通过取Request集合中的Files文件集合拿的 拿到文件数量为0 HttpFileCollection MyFilecollection = Request.Files; int cout = MyFilecollection.Count; MyFilecollection[0].SaveAs(Server.MapPath("~/upload/" + MyFilecollection[0].FileName));
求解释

你理解错了。这不是普通的Files对象，只是普通的一个变量参数Request.form(“files1”)

我现在也遇到这个问题，用mui.post过去，后台api取不到数据，请问你现在解决了吗

回复 妙妙:这就不是一个文件，只是一个参数。用request.form[“files1”]

发现img.onload方法不执行，是什么原因啊

以下是我编码成base64的字符串…不知道C#如何解码,求赐教
data:image/jpeg;base64,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

上面不是有C#代码吗？

我看到有 但是我转换老失败

回复 水粑粑:那你就还种方式， ///

/// base64编码的字符串转为图片 /// 2015-4-22 /// zlz /// /// <param name="base64">base64图片编码</param> /// <returns></returns> public Bitmap base64StringToImage(string base64) { try { base64 = base64.IndexOf(“data:image/jpeg;base64,”) > -1 ? base64.Replace(“data:image/jpeg;base64,”, “”) : base64; byte[] arr = Convert.FromBase64String(base64); MemoryStream ms = new MemoryStream(arr); Bitmap bmp = new Bitmap(ms);

回复 半杯可乐:好的 3Q 我试试

回复 半杯可乐: 报错: Base-64 字符数组或字符串的长度无效。 加密是用的楼主的代码

var base64 = canvas.toDataURL(‘image/jpeg’, 1 || 0.8 );

无奈了…

你调试下，感觉是你写的代码有问题，是否base64传到后台是否正确。

前面这段 data:image/jpeg;base64, 是不包含在base64编码里面的，好像是这段，自己调试一下试试

那个旋转90度的问题时怎么解决的呢？

评论里面有人发了答案

您好，请问在三星上时如何兼容的呢？ input type＝‘file’ 标签在应用中打不开。。。。请问您是如何解决的呢？

如果需要把截图获取到的base64数据生成成图片，保存到相册里面，这个要怎么实现呢，代码如下：

view = Activity.getCurrentFocus(); plus.android.invoke(view,“setDrawingCacheEnabled”,true); plus.android.invoke(view,“buildDrawingCache”); //对view截图，存入bitmap中 bitmap = plus.android.invoke(view,“getDrawingCache”); if(null != bitmap){ console.log(“截图成功”); try{ str = new StringBuffer(); bStream = new ByteArrayOutputStream(); bitmap.compress(bBitmap.CompressFormat.PNG, 100, bStream); bStream.flush(); bStream.close(); bytes = bStream.toByteArray(); str.append(Base64.encodeToString(bytes, Base64.NOWRAP)); } catch(e){ console.log(e.message); } var imgFile = “data:image/png;base64,” + str.toString(); var filename = “order” + id.toString() + “.jpg”;
plus.io.requestFileSystem(plus.io.PUBLIC_DOWNLOADS, function(fs) {
fs.root.getFile(‘test.png’, {“create”: true},
function(fileEntry) {
console.log(fileEntry.fullPath);
fileEntry.createWriter(function(writer) {
writer.onwrite = function(e) {
console.log(“Write data success!”);
};
writer.write( str.toString() );
});
},function(e){
console.log("getFile failed: " + e.message);
});
}, function(e) {
console.log("Request file system failed: " + e.message);
});
1.能生成一段base64编码 这样也能生成图片，还能运行到console.log(“Write data success!”); 这一句，但是到响应的目录下面找不到文件，怎么回事呢？

如果可以的话 能不能直接把在相册目录里面创建一个文件，然后把base64内容填进去，生成图片呢？

有bug

@63482 你也在试这个 ？

那里有问题 ， 请指正啊？

回复 failedtocopy:是我的代码的bug么？

谢谢分享

HTML5+已经在plus.zip里提供了compressImage的原生图像压缩。 具体见：http://www.html5plus.org/doc/zh_cn/zip.html#plus.zip.compressImage
或 http://ask.dcloud.net.cn/article/123

会自动修正照片方向吗

在iphone上压缩后，图片出现变形，高度没按等比生成，全部挤在顶部了，求解决

php 服务器端怎么弄 多图上传的时候

请问怎么用mui.ajax提前图片到asp.net mvc api上呢， 我使用mui.post base64数据到asp.net mvc api上，后台根本收不到参数

文件上传后再次下载下来能复原原来的照片质量吗？

先备注，我有预感，快用到了。

请教一个问题： 包含这段代码的html页面，如果是从网上加载的，就会导致img.onload不执行， 而如果包含这段代码的html本身就在本地，就没有问题了。
http://ask.dcloud.net.cn/question/11337，这个是我提的问题，不知道表达清楚了么。

mark

C# 服务端代码：
[HttpPost]
public JsonResult Upload2() {
string dirPath = HttpContext.Server.MapPath("~/_Temp/");
if (!Directory.Exists(dirPath))
Directory.CreateDirectory(dirPath);
//System.IO.File.WriteAllText(dirPath + _FName + “.txt”, str);
MemoryStream ms = null;
try
{
byte[] byts = new byte[Request.InputStream.Length];
Request.InputStream.Read(byts, 0, byts.Length);
String strOrg = Server.UrlDecode(System.Text.Encoding.UTF8.GetString(byts));
String[] ss = strOrg.Split(’&’);
foreach (String str in ss)
{
if (String.IsNullOrEmpty(str))
continue;

            String _FName = new System.Random().Next(100000, 999999).ToString();  
            System.IO.File.WriteAllText(dirPath + _FName + ".txt", str);  
            String _Ext = str.Substring(str.IndexOf("/") + 1, str.IndexOf(";base64,") - str.IndexOf("/") - 1);  
            String _Img = str.Substring(str.IndexOf(";base64,") + 8);  
            byte[] arr = Convert.FromBase64String(_Img);  
            ms = new MemoryStream(arr);  
            System.Drawing.Bitmap bmp = new System.Drawing.Bitmap(ms);  
            switch (_Ext.ToUpper())  
            {  
                case "PNG":  
                    bmp.Save(dirPath + _FName + "." + _Ext, System.Drawing.Imaging.ImageFormat.Png);  
                    break;  
                case "JPG":  
                    bmp.Save(dirPath + _FName + "." + _Ext, System.Drawing.Imaging.ImageFormat.Jpeg);  
                    break;  
                case "JPEG":  
                    bmp.Save(dirPath + _FName + "." + _Ext, System.Drawing.Imaging.ImageFormat.Jpeg);  
                    break;  
                case "BMP":  
                    bmp.Save(dirPath + _FName + "." + _Ext, System.Drawing.Imaging.ImageFormat.Bmp);  
                    break;  
                case "GIF":  
                    bmp.Save(dirPath + _FName + "." + _Ext, System.Drawing.Imaging.ImageFormat.Gif);  
                    break;  
                case "ICON":  
                    bmp.Save(dirPath + _FName + "." + _Ext, System.Drawing.Imaging.ImageFormat.Icon);  
                    break;  
                case "TIFF":  
                    bmp.Save(dirPath + _FName + "." + _Ext, System.Drawing.Imaging.ImageFormat.Tiff);  
                    break;  
                case "WMF":  
                    bmp.Save(dirPath + _FName + "." + _Ext, System.Drawing.Imaging.ImageFormat.Wmf);  
                    break;  
                case "EMF":  
                    bmp.Save(dirPath + _FName + "." + _Ext, System.Drawing.Imaging.ImageFormat.Emf);  
                    break;  
                case "EXIF":  
                    bmp.Save(dirPath + _FName + "." + _Ext, System.Drawing.Imaging.ImageFormat.Exif);  
                    break;  
            }  
            ms.Close();  
            ms.Dispose();  
            ms = null;  
        }  

        return Json(new  
        {  
            success = true,  
            message = "上传成功."  
        }, JsonRequestBehavior.AllowGet);  
    }  
    catch (Exception ex)  
    {  
        return Json(new  
        {  
            success = false,  
            message = Helper.GetExceptionFullMessage(ex)  
        }, JsonRequestBehavior.AllowGet);  
    }  
    finally {  
        if (ms != null)  
        {  
            ms.Close();  
            ms.Dispose();  
            ms = null;  
        }  
    }            
}  

    function imgupgrade() {  
        plus.nativeUI.showWaiting();  
        var url = 'http://192.168.1.112/hb/Fm/Archives/Upload2';  
        var dataType = 'json';  
        //发送数据    
        var data = {  
            files1: f1 //base64数据          
        };  
        mui.post(url, data, success, dataType);  
    }  
    //成功响应的回调函数  
    var success = function(response) {   
        plus.nativeUI.closeWaiting();  
        if (response != null && !response.success) {  
            alert(response.message);  
        }  
    }<br>

一般很友好的做法是从相册选取图片，然后裁剪，最后上传（京东，淘宝，支付宝等混合开发出来的app都这么做），感觉压缩图片不好，那么问一下，选取图片后裁剪怎么做？

拍照之后APP会重启 怎么办？

怎么用不了

先留名、以后会用到

if(files.length < 2) 这一步报错（拍照上传） Can’t find variable: files

谢谢谢谢

学习一下

多张图压缩 处理方法 解决plus.zip.compressImage 图片循环压缩无法都压缩完的问题 解决多图压缩处理方法

mark

mark

index

php端应该这样

<?php namespace Home\Controller; use Think\Controller; //登录控制器 class TestController extends Controller { //显示登录页面并验证 public function index(){ $s=dirname(__FILE__); //获的服务器路劲 $time =time(); //获得当前时间戳 $files =$_POST['files1']; $key = str_replace(' ','+',$files); $files1 = substr($key,23); //百度一下就可以知道base64前面一段需要清除掉才能用。 //解码 $tmp = base64_decode($files1); //$fp=$s."/uploads/".$time.".jpg"; //确定图片文件位置及名称 //写文件 // file_put_contents( $fp, $tmp); //给图片文件写入数据 file_put_contents("./mylog.jpg",$tmp); echo 1; } }

图片旋转90度的没找到解决方案。。。。

真不错，希望有源码。

楼主，压缩之后的大小如何获取？？？

看一下

你好，我用vue打包app的调用摄像头有问题，调用了toLocalURL这个方法后下面的代码没有执行，是不是出了什么问题

压缩后上传的是base64，怎样不上传base64，而是上传的file

没有上传file啊。你看到哪一行？我这个说的是上传，其实就是用ajax 发送一段base64数据。 就是这个 //发送数据 var data = { files1:f1 //base64数据 };

我知道，我是想知道能不能把base64保存成png后，再上传图片，而不是上传post参数base64

js不能转文件流, 本地文件js能操作就危险了.所以不允许.

回复 llyzlc: 服务器架设个FTP ， JS有上传ftp的api

针对你提出的uni-app分享图片压缩上传的需求，下面是一个简化的代码示例，涵盖了前端uni-app部分以及一个简单的Node.js服务器端处理图片上传。

前端（uni-app）

首先，确保你已经在项目中安装了必要的依赖，比如@xkeshi/image-compressor用于图片压缩。

  1. 安装依赖
npm install @xkeshi/image-compressor
  1. 页面代码
<template>
  <view>
    <button @click="chooseImage">选择图片</button>
    <image v-if="previewImage" :src="previewImage" mode="widthFix"></image>
    <button @click="uploadImage" v-if="previewImage">上传图片</button>
  </view>
</template>

<script>
import ImageCompressor from '@xkeshi/image-compressor';

export default {
  data() {
    return {
      previewImage: null,
      compressedImage: null,
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.previewImage = res.tempFilePaths[0];
          this.compressImage(res.tempFilePaths[0]);
        },
      });
    },
    compressImage(filePath) {
      new ImageCompressor(filePath, {
        quality: 0.6,
        success: (result) => {
          this.compressedImage = result.path;
        },
        fail: (err) => {
          console.error(err.msg);
        },
      }).compress();
    },
    uploadImage() {
      uni.uploadFile({
        url: 'http://your-server-url/upload', // 替换为你的服务器地址
        filePath: this.compressedImage,
        name: 'file',
        success: (uploadFileRes) => {
          console.log('上传成功', uploadFileRes);
        },
        fail: (err) => {
          console.error('上传失败', err);
        },
      });
    },
  },
};
</script>

后端（Node.js + Express）

以下是一个简单的Node.js服务器，使用Express框架处理图片上传。

  1. 安装依赖
npm install express multer
  1. 服务器代码
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
const port = 3000;

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/');
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + path.extname(file.originalname));
  },
});

const upload = multer({ storage: storage });

app.post('/upload', upload.single('file'), (req, res) => {
  res.send({ message: '文件上传成功', file: req.file });
});

app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

确保在服务器端创建一个名为uploads的文件夹以存储上传的图片。

这个示例展示了如何在uni-app中选择、压缩并上传图片，以及如何在服务器端接收并存储这些图片。根据实际需求，你可能需要调整图片压缩的参数、错误处理逻辑以及服务器端的存储策略。

回到顶部