精华内容
下载资源
问答
  • 前端选择本地的png、jpg、等格式的图片,将图片以二进制的形式传后端服务器,后端对二进制图片进行处理,返回给前端一个服务器链接在线图片,在浏览器就可以打开链接访问的那种。然后前端将这个图片链接渲染在页面...

    功能需求:
    前端选择本地文件,将选择好的文件显示在界面上进行预览,可同时选择四张进行预览。

    思路如下:
    前端选择本地的png、jpg、等格式的图片,将图片以二进制的形式传到后端服务器,后端对二进制图片进行处理,返回给前端一个服务器链接在线图片,在浏览器就可以打开链接访问的那种。然后前端将这个图片链接渲染在页面进行预览。

    首先
    我们看一下uniapp的官方文档:
    https://uniapp.dcloud.io/api/media/image?id=chooseimage

    大概是这样的
    先写一个模拟的demo
    1:首先我是是用了colorUI的框架,在项目里面引入



    在page底下的vue文件引入

    @import "../../colorui/main.css";
    @import "../../colorui/icon.css";

    这样一来,就不需要写什么样式了,直接使用写好的就行了。

    <template>
        <view>
            <form>
                <view class="cu-bar bg-white margin-top">
                    <view class="action">
                        图片上传
                    </view>
                    <view class="action">
                        {{imgList.length}}/4
                    </view>
                </view>
                <view class="cu-form-group">
                    <view class="grid col-4 grid-square flex-sub">
                        <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
                         <image :src="imgList[index]" mode="aspectFill"></image>
                            <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                                <text class='cuIcon-close'></text>
                            </view>
                        </view>
                        <view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
                            <text class='cuIcon-cameraadd'></text>
                        </view>
                    </view>
                </view>
                
            </form>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    imgList: [],
                //  modalName: null,
                };
            },
            methods: {
            
                ChooseImage() {
                    uni.chooseImage({
                        count: 4, //默认9
                        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
                        sourceType: ['album'], //从相册选择
                        success: (res) => {
                            if (this.imgList.length != 0) {
                                this.imgList = this.imgList.concat(res.tempFilePaths)
                            } else {
                                this.imgList = res.tempFilePaths
                            }
                        }
                    });
                },
                ViewImage(e) {
                    uni.previewImage({
                        urls: this.imgList,
                        current: e.currentTarget.dataset.url
                    });
                },
                //删除
                DelImg(e) {
                    uni.showModal({
                        title: '删除',
                        content: '确定要删除这张图片?',
                        cancelText: '取消',
                        confirmText: '删除',
                        success: res => {
                            if (res.confirm) {
                                this.imgList.splice(e.currentTarget.dataset.index, 1)
                            }
                        }
                    })
                },
            }
        }
    </script>
    
    <style>
    @import "../../colorui/main.css";
    @import "../../colorui/icon.css";
    .cu-form-group .title {
       min-width: calc(4em + 15px);
    }
    </style>

    效果是这样的
    每次选完图片之后显示在页面上,我这里设置了最多可以选择四张,图片链接使用了临时的blob,接下来就要使用后端小伙伴给的接口,将自己本地的二进制文件传给他了。


    chooseImage选择好图片之后,写一个成功的回调函数,在回到函数里面添加一个图片上传的方法uploadFile,在方法里面添加url,等参数。

    success: (res) => {
                            const tempFilePaths = res.tempFilePaths;
                            const uploadTask = uni.uploadFile({
                                url: 'http://47.xxx.xxx.78:8088/chemApp/work/upload.action',
                                filePath: tempFilePaths[0],
                                name: 'file',
                                success: function(uploadFileRes) {
                                    console.log(uploadFileRes);
                                    _this.imgList = [..._this.imgList, uploadFileRes.data]
    
                                }
                            });
                        }

    若是请求成功
    则返回一个图片链接


    添加接口之后 的,demo如下:

    <template>
        <view>
            <form>
                <view class="cu-bar bg-white margin-top">
                    <view class="action">
                        图片上传
                    </view>
                    <view class="action">
                        {{imgList.length}}/4
                    </view>
                </view>
                <view class="cu-form-group">
                    <view class="grid col-4 grid-square flex-sub">
                        <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="item">
                         <image v-if="item" :src="item" mode="aspectFill"></image>
                            <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                                <text class='cuIcon-close'></text>
                            </view>
                        </view>
                        <view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
                            <text class='cuIcon-cameraadd'></text>
                        </view>
                    </view>
                </view>
                
            </form>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    imgList: [],
                //  modalName: null,
                };
            },
            methods: {
            
                ChooseImage() {
                    const _this = this
                    uni.chooseImage({
                        count: 4, //默认9
                        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
                        sourceType: ['album'], //从相册选择
                        success: (res) => {
                             const tempFilePaths = res.tempFilePaths;
                                 const uploadTask = uni.uploadFile({
                                  url : 'http://47.xxx.xxx.78:8088/chemApp/work/upload.action',
                                  filePath: tempFilePaths[0],
                                  name: 'file',
                                 
                                  success: function (uploadFileRes) {
                                   console.log(uploadFileRes);
                                   _this.imgList = [..._this.imgList, uploadFileRes.data]
                                   
                                  }
                                 });
                           
                        }
                    });
                },
                ViewImage(e) {
                    uni.previewImage({
                        urls: this.imgList,
                        current: e.currentTarget.dataset.url
                    });
                },
                //删除
                DelImg(e) {
                    uni.showModal({
                        title: '删除',
                        content: '确定要删除这张图片?',
                        cancelText: '取消',
                        confirmText: '删除',
                        success: res => {
                            if (res.confirm) {
                                this.imgList.splice(e.currentTarget.dataset.index, 1)
                            }
                        }
                    })
                },
            }
        }
    </script>
    
    <style>
    @import "../../colorui/main.css";
    @import "../../colorui/icon.css";
    .cu-form-group .title {
       min-width: calc(4em + 15px);
    }
    </style>
    展开全文
  • uniapp 上传图片到本地node.js服务器

    千次阅读 2020-01-17 13:31:28
    今天头脑一热就想做一个 图片上传的功能 刚好也学uniapp图片上传 也可以把之前的node.js 知识复习下 虽然中间碰见了点问题 但还是很流畅解决 用了五六分钟 好了 和往常一样 废话不多BB直接上代码 1.搭建 ...

    今天头脑一热就想做一个 图片上传的功能  刚好也学到了 uniapp的图片上传 

    也可以把之前的node.js 知识复习下 虽然中间碰见了点问题 但还是很流畅解决 用了五六分钟

    好了 和往常一样  废话不多BB直接上代码

    1.搭建 uniapp 客户端上传代码   (注意 我这个是运行的本地 h5端的  谷歌手机模拟器)

    <button @click="img">上传图片</button>

    界面就很简单 就一个按钮

    2.选择图片 添加一个方法

    img:function(){
                    uni.chooseImage({         //选择图片
                        count:1,
                        sizeType:["compressed"],
                        success(res) {
                            var imgsFile=res.tempFilePaths[0];  //获取图片的临时资源
                            uni.uploadFile({     //上传代码
                                url:"http://localhost:8088/users/upload", //本地node.js服务器地址
                                filePath:imgsFile,
                                name:"file",    //这个东西有点类似与 form表单中的  name值 在后面也需要这个
                                success:function(res){
                                    console.log(res);
                                }
                            })
                        }
                    })
                }

    3.那前台准备好了 就是node后台了

    这里我偷懒了 直接使用了 node.js的脚手架  (脚手架不知怎么建立 我前面的博客 有说过 :

    https://blog.csdn.net/yunchong_zhao/article/details/102718102)

    再上传之前  还是要准备一下环境的比如 跨域问题肯定要碰见的 

    因为 我们的 uniapp 监视着一个端口  node.js又监视一个端口  俩者之间肯定涉及跨域问题

    https://blog.csdn.net/yunchong_zhao/article/details/104003709   //这里有快速解决跨域的问题

    4.node.js脚手架和跨域问题解决好了之后 就是 各种辅助插件的安装

    npm install fs  --save //node.js  文件操作模块  写入文件需要

    npm install path --save  // 地址拼接需要

    npm install multer  --save  // 文件上传模块 这个是必须的

    在你创建好的node.js脚手架中   在routers 文件下 的 user.js文件中书写代码

    const path=require("path");          //导入path模块
    const multer=require("multer");     //导入multer模块
    const fs=require('fs');   //导入文件操作模块
    //设置临时目录 存放上传的图片
    const upload=multer({dest:"tmp/"});

    // 接受客户端上传的图片
    router.post("/upload",upload.single("file"),(req,res)=>{
        let imgFile=req.file;//获取图片上传的资源
        var tmp=imgFile.path;//获取临时资源
        let ext=path.extname(imgFile.originalname);//利用path模块获取 用户上传图片的 后缀名
        let newName=""+(new Date().getTime())+Math.round(Math.random()*10000)+ext;  //给用户上传的图片重新命名 防止重名
        let newPath="../public/images/"+newName; //给图片设置存放目录  提前给当前文件夹下建立一个   images文件夹  !!!!
        let fileData=fs.readFileSync(tmp);//将上传到服务器上的临时资源 读取到 一个变量里面
        fs.writeFileSync(path.join(__dirname,newPath),fileData);//重新书写图片文件  写入到指定的文件夹下
        res.send("写入图片成功!");//上传成功之后  给客户端响应
    })

    这里有一个小坑就是 : node.js 地址拼接 一定要  path.join() 

    5.测试

    让我们来选择一张图片上传

    最后也确实 收到了 图片 好了 图片上传算是完成了  算是一个小的项目实战了

     

    展开全文
  • uniapp上传图片到阿里云oss服务器

    千次阅读 2020-06-15 15:51:02
    that.$LoadingMsg('图片上传中...'); uni.uploadFile({ url: osshost, filePath: that.imageSrc, fileType: 'image', name: 'file', formData: { 'key': ...
    // A code block
    index.vue
    
    // An highlighted block
    import Crypto from '@/common/upload/crypto.js';
    	import '@/common/upload/hmac.js';
    	import '@/common/upload/sha1.js';
    	import {
    		Base64
    	} from '@/common/upload/base64.js';
    	//  oss 配置
    	var uploadFileSize = 1024 * 1024 * 100; // 上传文件的大小限制100m
    	var policyText = {
    		"expiration": "2022-01-01T12:00:00.000Z", //设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了
    		"conditions": [
    			["content-length-range", 0, uploadFileSize] // 设置上传文件的大小限制 
    		]
    	};
    	var accessid = '**************';/自己去申请
    	var accesskey = '****************';/自己去申请
    	var osshost = '*';
    	var policyBase64 = Base64.encode(JSON.stringify(policyText));
    	var message = policyBase64;
    	var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, {
    		asBytes: true
    	});
    	var signature = Crypto.util.bytesToBase64(bytes);
    	var timetamp = new Date().getTime();
    
    	function random_string(len) {
    		len = len || 32;
    		var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
    		var maxPos = chars.length;
    		var pwd = '';
    		for (let i = 0; i < len; i++) {
    			pwd += chars.charAt(Math.floor(Math.random() * maxPos));
    		}
    		return pwd;
    	}
    			//更换头像
    			updataAvator() {
    				let that = this;
    				uni.chooseImage({
    					count: 5, //默认9
    					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
    					sourceType: ['album', 'camera'], //从相册选择
    					success: function(res) {
    						that.imageSrc = res.tempFilePaths[0]
    						let pos = that.imageSrc.lastIndexOf('.');
    						let filename = that.imageSrc.substring(0, pos) // 文件名
    						let extendName = that.imageSrc.substring(pos + 1); // 扩展名
    						let stroeAs = 'shixuan/img/' + timetamp + random_string(5) + '.' + extendName;
    						that.$LoadingMsg('图片上传中...');
    						uni.uploadFile({
    							url: osshost,
    							filePath: that.imageSrc,
    							fileType: 'image',
    							name: 'file',
    							formData: {
    								'key': stroeAs,
    								'policy': policyBase64,
    								'OSSAccessKeyId': accessid,
    								'success_action_status': '200', //让服务端返回200,不然,默认会返回204
    								'signature': signature,
    							},
    							success(res) {
    								uni.hideLoading();
    								uni.showToast({
    									title: '上传成功',
    									icon: 'success',
    									duration: 1000
    								})
    								that.headimgurl = osshost + '/' + stroeAs;
    							}
    						})
    					},
    					fail() {
    						uni.showToast({
    							title: '取消选择图片',
    							icon: 'none',
    							duration: 2000
    						});
    					}
    				});
    			},
    
    // A code block
    base64.js
    
    // An highlighted block
    export const Base64 = {
    
            // private property
            _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
    
            // public method for encoding
            encode : function (input) {
                var output = "";
                var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
                var i = 0;
    
                input = Base64._utf8_encode(input);
    
                while (i < input.length) {
    
                    chr1 = input.charCodeAt(i++);
                    chr2 = input.charCodeAt(i++);
                    chr3 = input.charCodeAt(i++);
    
                    enc1 = chr1 >> 2;
                    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                    enc4 = chr3 & 63;
    
                    if (isNaN(chr2)) {
                        enc3 = enc4 = 64;
                    } else if (isNaN(chr3)) {
                        enc4 = 64;
                    }
    
                    output = output +
                    this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
                    this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
    
                }
    
                return output;
            },
    
            // public method for decoding
            decode : function (input) {
                var output = "";
                var chr1, chr2, chr3;
                var enc1, enc2, enc3, enc4;
                var i = 0;
    
                input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
    
                while (i < input.length) {
    
                    enc1 = this._keyStr.indexOf(input.charAt(i++));
                    enc2 = this._keyStr.indexOf(input.charAt(i++));
                    enc3 = this._keyStr.indexOf(input.charAt(i++));
                    enc4 = this._keyStr.indexOf(input.charAt(i++));
    
                    chr1 = (enc1 << 2) | (enc2 >> 4);
                    chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
                    chr3 = ((enc3 & 3) << 6) | enc4;
    
                    output = output + String.fromCharCode(chr1);
    
                    if (enc3 != 64) {
                        output = output + String.fromCharCode(chr2);
                    }
                    if (enc4 != 64) {
                        output = output + String.fromCharCode(chr3);
                    }
    
                }
    
                output = Base64._utf8_decode(output);
    
                return output;
    
            },
    
            // private method for UTF-8 encoding
            _utf8_encode : function (string) {
                string = string.replace(/\r\n/g,"\n");
                var utftext = "";
    
                for (var n = 0; n < string.length; n++) {
    
                    var c = string.charCodeAt(n);
    
                    if (c < 128) {
                        utftext += String.fromCharCode(c);
                    }
                    else if((c > 127) && (c < 2048)) {
                        utftext += String.fromCharCode((c >> 6) | 192);
                        utftext += String.fromCharCode((c & 63) | 128);
                    }
                    else {
                        utftext += String.fromCharCode((c >> 12) | 224);
                        utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                        utftext += String.fromCharCode((c & 63) | 128);
                    }
    
                }
    
                return utftext;
            },
    
            // private method for UTF-8 decoding
            _utf8_decode : function (utftext) {
                var string = "";
                var i = 0;
                var c = c1 = c2 = 0;
    
                while ( i < utftext.length ) {
    
                    c = utftext.charCodeAt(i);
    
                    if (c < 128) {
                        string += String.fromCharCode(c);
                        i++;
                    }
                    else if((c > 191) && (c < 224)) {
                        c2 = utftext.charCodeAt(i+1);
                        string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                        i += 2;
                    }
                    else {
                        c2 = utftext.charCodeAt(i+1);
                        c3 = utftext.charCodeAt(i+2);
                        string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                        i += 3;
                    }
    
                }
    
                return string;
            }
    
        }
    
    
    // A code block
    crypto.js
    
    // An highlighted block
    /*!
     * Crypto-JS v1.1.0
     * http://code.google.com/p/crypto-js/
     * Copyright (c) 2009, Jeff Mott. All rights reserved.
     * http://code.google.com/p/crypto-js/wiki/License
     */
    // (function(){
    
    var base64map = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    
    // Global Crypto object
    // window.Crypto = {};
    let Crypto = {};
    
    // Crypto utilities
    var util = Crypto.util = {
    
        // Bit-wise rotate left
        rotl: function (n, b) {
            return (n << b) | (n >>> (32 - b));
        },
    
        // Bit-wise rotate right
        rotr: function (n, b) {
            return (n << (32 - b)) | (n >>> b);
        },
    
        // Swap big-endian to little-endian and vice versa
        endian: function (n) {
    
            // If number given, swap endian
            if (n.constructor == Number) {
                return util.rotl(n,  8) & 0x00FF00FF |
                       util.rotl(n, 24) & 0xFF00FF00;
            }
    
            // Else, assume array and swap all items
            for (var i = 0; i < n.length; i++)
                n[i] = util.endian(n[i]);
            return n;
    
        },
    
        // Generate an array of any length of random bytes
        randomBytes: function (n) {
            for (var bytes = []; n > 0; n--)
                bytes.push(Math.floor(Math.random() * 256));
            return bytes;
        },
    
        // Convert a string to a byte array
        stringToBytes: function (str) {
            var bytes = [];
            for (var i = 0; i < str.length; i++)
                bytes.push(str.charCodeAt(i));
            return bytes;
        },
    
        // Convert a byte array to a string
        bytesToString: function (bytes) {
            var str = [];
            for (var i = 0; i < bytes.length; i++)
                str.push(String.fromCharCode(bytes[i]));
            return str.join("");
        },
    
        // Convert a string to big-endian 32-bit words
        stringToWords: function (str) {
            var words = [];
            for (var c = 0, b = 0; c < str.length; c++, b += 8)
                words[b >>> 5] |= str.charCodeAt(c) << (24 - b % 32);
            return words;
        },
    
        // Convert a byte array to big-endian 32-bits words
        bytesToWords: function (bytes) {
            var words = [];
            for (var i = 0, b = 0; i < bytes.length; i++, b += 8)
                words[b >>> 5] |= bytes[i] << (24 - b % 32);
            return words;
        },
    
        // Convert big-endian 32-bit words to a byte array
        wordsToBytes: function (words) {
            var bytes = [];
            for (var b = 0; b < words.length * 32; b += 8)
                bytes.push((words[b >>> 5] >>> (24 - b % 32)) & 0xFF);
            return bytes;
        },
    
        // Convert a byte array to a hex string
        bytesToHex: function (bytes) {
            var hex = [];
            for (var i = 0; i < bytes.length; i++) {
                hex.push((bytes[i] >>> 4).toString(16));
                hex.push((bytes[i] & 0xF).toString(16));
            }
            return hex.join("");
        },
    
        // Convert a hex string to a byte array
        hexToBytes: function (hex) {
            var bytes = [];
            for (var c = 0; c < hex.length; c += 2)
                bytes.push(parseInt(hex.substr(c, 2), 16));
            return bytes;
        },
    
        // Convert a byte array to a base-64 string
        bytesToBase64: function (bytes) {
    
            // Use browser-native function if it exists
            if (typeof btoa == "function") return btoa(util.bytesToString(bytes));
    
            var base64 = [],
                overflow;
    
            for (var i = 0; i < bytes.length; i++) {
                switch (i % 3) {
                    case 0:
                        base64.push(base64map.charAt(bytes[i] >>> 2));
                        overflow = (bytes[i] & 0x3) << 4;
                        break;
                    case 1:
                        base64.push(base64map.charAt(overflow | (bytes[i] >>> 4)));
                        overflow = (bytes[i] & 0xF) << 2;
                        break;
                    case 2:
                        base64.push(base64map.charAt(overflow | (bytes[i] >>> 6)));
                        base64.push(base64map.charAt(bytes[i] & 0x3F));
                        overflow = -1;
                }
            }
    
            // Encode overflow bits, if there are any
            if (overflow != undefined && overflow != -1)
                base64.push(base64map.charAt(overflow));
    
            // Add padding
            while (base64.length % 4 != 0) base64.push("=");
    
            return base64.join("");
    
        },
    
        // Convert a base-64 string to a byte array
        base64ToBytes: function (base64) {
    
            // Use browser-native function if it exists
            if (typeof atob == "function") return util.stringToBytes(atob(base64));
    
            // Remove non-base-64 characters
            base64 = base64.replace(/[^A-Z0-9+\/]/ig, "");
    
            var bytes = [];
    
            for (var i = 0; i < base64.length; i++) {
                switch (i % 4) {
                    case 1:
                        bytes.push((base64map.indexOf(base64.charAt(i - 1)) << 2) |
                                   (base64map.indexOf(base64.charAt(i)) >>> 4));
                        break;
                    case 2:
                        bytes.push(((base64map.indexOf(base64.charAt(i - 1)) & 0xF) << 4) |
                                   (base64map.indexOf(base64.charAt(i)) >>> 2));
                        break;
                    case 3:
                        bytes.push(((base64map.indexOf(base64.charAt(i - 1)) & 0x3) << 6) |
                                   (base64map.indexOf(base64.charAt(i))));
                        break;
                }
            }
    
            return bytes;
    
        }
    
    };
    
    // Crypto mode namespace
    Crypto.mode = {};
    
    // })();
    
    export default Crypto;
    
    // A code block
    hmac.js
    
    // An highlighted block
    import Crypto from '@/common/upload/crypto.js';
    /*!
     * Crypto-JS v1.1.0
     * http://code.google.com/p/crypto-js/
     * Copyright (c) 2009, Jeff Mott. All rights reserved.
     * http://code.google.com/p/crypto-js/wiki/License
     */
    (function(){
    
    // Shortcut
    var util = Crypto.util;
    
    Crypto.HMAC = function (hasher, message, key, options) {
    
        // Allow arbitrary length keys
        key = key.length > hasher._blocksize * 4 ?
              hasher(key, { asBytes: true }) :
              util.stringToBytes(key);
    
        // XOR keys with pad constants
        var okey = key,
            ikey = key.slice(0);
        for (var i = 0; i < hasher._blocksize * 4; i++) {
            okey[i] ^= 0x5C;
            ikey[i] ^= 0x36;
        }
    
        var hmacbytes = hasher(util.bytesToString(okey) +
                               hasher(util.bytesToString(ikey) + message, { asString: true }),
                               { asBytes: true });
        return options && options.asBytes ? hmacbytes :
               options && options.asString ? util.bytesToString(hmacbytes) :
               util.bytesToHex(hmacbytes);
    
    };
    
    })();
    
    
    // A code block
    sha1.js
    
    // An highlighted block
    import Crypto from '@/common/upload/crypto.js';
    /*!
     * Crypto-JS v1.1.0
     * http://code.google.com/p/crypto-js/
     * Copyright (c) 2009, Jeff Mott. All rights reserved.
     * http://code.google.com/p/crypto-js/wiki/License
     */
    (function(){
    
    // Shortcut
    var util = Crypto.util;
    
    // Public API
    var SHA1 = Crypto.SHA1 = function (message, options) {
        var digestbytes = util.wordsToBytes(SHA1._sha1(message));
        return options && options.asBytes ? digestbytes :
               options && options.asString ? util.bytesToString(digestbytes) :
               util.bytesToHex(digestbytes);
    };
    
    // The core
    SHA1._sha1 = function (message) {
    
        var m  = util.stringToWords(message),
            l  = message.length * 8,
            w  =  [],
            H0 =  1732584193,
            H1 = -271733879,
            H2 = -1732584194,
            H3 =  271733878,
            H4 = -1009589776;
    
        // Padding
        m[l >> 5] |= 0x80 << (24 - l % 32);
        m[((l + 64 >>> 9) << 4) + 15] = l;
    
        for (var i = 0; i < m.length; i += 16) {
    
            var a = H0,
                b = H1,
                c = H2,
                d = H3,
                e = H4;
    
            for (var j = 0; j < 80; j++) {
    
                if (j < 16) w[j] = m[i + j];
                else {
                    var n = w[j-3] ^ w[j-8] ^ w[j-14] ^ w[j-16];
                    w[j] = (n << 1) | (n >>> 31);
                }
    
                var t = ((H0 << 5) | (H0 >>> 27)) + H4 + (w[j] >>> 0) + (
                         j < 20 ? (H1 & H2 | ~H1 & H3) + 1518500249 :
                         j < 40 ? (H1 ^ H2 ^ H3) + 1859775393 :
                         j < 60 ? (H1 & H2 | H1 & H3 | H2 & H3) - 1894007588 :
                                  (H1 ^ H2 ^ H3) - 899497514);
    
                H4 =  H3;
                H3 =  H2;
                H2 = (H1 << 30) | (H1 >>> 2);
                H1 =  H0;
                H0 =  t;
    
            }
    
            H0 += a;
            H1 += b;
            H2 += c;
            H3 += d;
            H4 += e;
    
        }
    
        return [H0, H1, H2, H3, H4];
    
    };
    
    // Package private blocksize
    SHA1._blocksize = 16;
    
    })();
    
    
    展开全文
  • vue 新建js文件 let OSS = require('ali-oss'); //npm 下载ali-oss let client = new OSS({ /*需要自己去申请*/ accessKeyId: '', accessKeySecret: '', ...在oss上的保存图片的文件夹(自定义一个文件夹名) le

    vue

    • 新建js文件
    let OSS = require('ali-oss'); //npm 下载ali-oss
    
    let client = new OSS({
    	/*需要自己去申请*/
        accessKeyId: '',
        accessKeySecret: '',
        bucket: '',
        region: '',
    });
    
    export async function put (obj) {
    //	'tu/'=>在oss上的保存图片的文件夹(自定义一个文件夹名)
      let a = 'tu/'+obj.file.name;
      let b = obj.file
      try {
        //object-name可以自定义为文件名(例如file.txt)或目录(例如abc/test/file.txt)的形式,实现将文件上传至当前Bucket或Bucket下的指定目录。
        let result = await client.put(a, b);
    	//result.url=>返回的图片在线地址
      } catch (e) {
        // console.log(e);
      }
    }
    
    • 图片文件的转换
      //base64转blob
        dataURLtoBlob(dataurl) {
          var arr = dataurl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          return new Blob([u8arr], { type: mime });
        },
        //将blob转换为file
        blobToFile(theBlob, fileName) {
          theBlob.lastModifiedDate = new Date();
          theBlob.name = fileName;
          return theBlob;
        },
        // 调用方法转换图片
        getpictuer(dataUrl){
          var _blob = this.dataURLtoBlob(dataUrl);
          var suffix = dataUrl.split(';')[0].split(':')[1].split('/')[1];//文件扩展名
          var _filename = String(new Date().getTime())+'.'+suffix;
          var _file = this.blobToFile(_blob, filename)
          this.file = _file;
          this.filename = _file.name;
        },
    

    uniapp(JavaScript客户端签名直传)

    • oss文档 https://help.aliyun.com/document_detail/31925.html?spm=a2c4g.11186623.6.1546.5f0258abSu5khU
    • oss.js
    import Crypto from '../components/crypto/crypto.js';
    import { Base64 } from '../components/js-base64';
    import '../components/crypto/hmac.js'; 
    import '../components/crypto/sha1.js'; 
    
    let accessid= '自行获取';
    let accesskey= '自行获取';
    let host = '阿里云仓库地址';
    
    var policyText = {
        "expiration": "2050-01-01T12:00:00.000Z", //设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了
        "conditions": [
        ["content-length-range", 0, 1024 * 1024 * 5] // 设置上传文件的大小限制
        ]
    };
    var policyBase64 = Base64.encode(JSON.stringify(policyText))
    var message = policyBase64;
    
    var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, { asBytes: true }) ;
    var signature = Crypto.util.bytesToBase64(bytes);
    
    export default{
    	policyBase64,
    	signature
    }
    
    • vue文件
    import oss from '上面的oss.js'
    uni.chooseImage({
    	count: 1,
    	sizeType: ['original', 'compressed'],
    	success:(res)=>{
    		//res里有图片临时地址
    		uni.uploadFile({
    			url:'阿里云地址,
    			filePath:文件路径,
    			fileType: 'image',
    			name: 'file',
    			formData:{ 
    				'name':"name",
    				'key':'key',
    				'OSSAccessKeyId':'自行获取',
    				'policy': oss.policyBase64,
    				'signature':oss.signature,
    				'success_action_status' : '200',
    			},
    			success:(res)=>{
    			    //成功之后的操作
    			},
    			fail: (err) => {
    				console.log(err)
    			}
    		})
    	}
    })
    
    • 需要的crypotjs已上传仓库可以去下载 https://gitee.com/jinguochao/crypotjs
    展开全文
  • 下载插件,先修改config.js,再引入插件,这个插件很好用啊,是直接上传到服务器没有后端签名的。 一、打开文件的config.js文件,需要改三个地方。 fileHost要改成你的阿里云地址:协议要写成https。地址不知道是...
  • uniApp上传图片

    千次阅读 2019-06-03 20:26:00
    项目中用上传图片的功能,记录一下。增强记忆。 要上传图片首先就要先选择图片...此接口调用成功会返回一个 临时路径,不管是要预览图片还是要上传到服务器都需要这个路径。同时,上传时还需要一个name属性,必...
  • uniapp上传图片、视频oss

    千次阅读 2019-10-08 03:41:14
    项目采用的是 阿里云oss js签名直传的方式。...1、上传图片 <template> <view class="zyby-img-upload-common auth-img-item" :class="{'img-item-special': !imgUrl}"> <div v-if="!imgUrl" ...
  • uniapp上传图片和视频OSS

    千次阅读 2020-08-04 10:01:15
    1.首先需要拿formData里面的参数如下所示: formData: { name: nameStr, key: nameStr, policy: 'xxxxxxxxx', // 输入你获取的的policy OSSAccessKeyId: 'xxxxxxxxxxxx', // 输入你的AccessKeyId ...
  • 前端选择本地的png、jpg、等格式的图片,将图片以二进制的形式传后端服务器,后端对二进制图片进行处理,返回给前端一个服务器链接在线图片,在浏览器就可以打开链接访问的那种。然后前端将这个图片链接渲染在
  • 最近在做uniapp相关的开发,在上传图片的时候遇到了一些问题,所幸经过一些努力,解决开发过程中遇到的困难,记录一下uniapp上传图片的实现过程 1、前端代码 setPic1: function() { var me = this; var ...
  • 服务器端做签名,前端携带签名直接将图片等资源上传OSS 优点:安全、高效、优雅、与现有服务器不冲突无影响,业务无限发展也毫不担心OSS性能问题。 核心3步骤: 1、开通阿里云OSS服务 做好相关配置 拿相关签名数据...
  • uniapp打包成H5部署到服务器教程

    千次阅读 2020-07-06 22:35:23
    在网上看了一圈,好像没有找到十分详细的教程,这里稍微详细的记录了一下,uniapp打包成H5部署到服务器教程。 步骤如下: 1:点击菜单栏发行,点击选择网站-H5手机版, 2:在网站域名这一栏填写,网站域名,...
  • uniapp上传图片使用组件Upload+java后端代码 #效果展示 ##数据库展示 ##本地展示 网页展示 代码展示 前端 uniapp <!-- 单张图片 --> <!-- <u-upload v-model="form.attachment" ref="uUpload" :file-...
  • 关于uniapp上传图片的功能实现

    千次阅读 2021-01-17 19:12:15
    // 第一个image标签就是从本地上传图片 // 第二个image标签是用来显示默认图片的 <view class="receiving"> <text>微信收款码</text> <view class="money_imag_code fl-jus-sp" @tap=...
  • 项目中需要实现一键分享的功能 把文字 图片保存用户相册和剪切板 下载文件资源本地 uni.downloadFile({ url: 下载资源的url, ... url: //要上传到服务器路径 项目中会给 filePath: //文件或是图片的路径
  • uniapp实现图片上传功能

    万次阅读 2020-03-01 21:22:43
    最近在自己写一个uniapp的项目,后台用的express,刚好遇到了上传图片到服务器的功能,这里总结一下。 1.前端部分 首先是要打开本地相册选择图片,用的api是uni.chooseImage uni.chooseImage({ count: 1, //上传图片...
  • *上传文件阿里云oss *@param - filePath :图片的本地资源路径 *@param - dir:表示要传哪个目录下 *@param - successc:成功回调 *@param - failc:失败回调 */ const uploadFile = ...
  • uniapp多张图片上传.rar

    2020-03-31 15:29:32
    uniapp 多张图片上传示例 VUE图片上传案例 前端图片上传源码 uniapp图片上传源码,很不错的例子
  • 图片上传到服务器 在insertImage()中加入uploadFile insertImage() { var that = this; uni.chooseImage({ count:1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'...
  • uniapp图片上传至后台

    2021-01-06 11:46:03
    uniapp图片上传至后台 直接上代码: uni.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['camera', 'album'], //camera拍照,album打开手机相册 success: (res) =>...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 557
精华内容 222
关键字:

uniapp上传图片到服务器