vux h5plus單圖,多圖,拍照,相冊選取base64圖片壓縮上傳

import lrz from "lrz"

import {generateMixed} from "../common"

import {add2Cache,getFromCache,removeFromCache} from "../cache"

// Created by quanzaiyu on 2017/10/25 0025.

var state = {

? img_upload_cache: [],//上傳文件緩存

? img_paths: [],//上傳狀態,包括 ready selected uploading finished

? img_status:'ready',// # 上傳后的路徑反饋數組(數據結構為Set集合)

? items:new Map(),

? orderno:"",

headerimg:""

}

const actions = {

choiceImgdate({commit}){//選擇拍照或上傳

? if (!window.plus){

? ? ? ? ? ? actions. choiceDanpic({commit})//如果不支持plus,就用本地相冊上傳即可

? ? ? ? ? ? return;

? ? ? ? ? }

? ? ? ? let title = "選擇照片"

? ? ? ? let btns = ['拍照','相冊']

? ? ? ? ? var func = function(e){?

? ? ? ? ? var index = e.index;?

? ? ? ? ? ? if(index == 1) actions.choiceCamera({commit});?

? ? ? ? ? if(index == 2)? actions. choiceDanpic({commit});?

? ? ? ? }

? ? ? ? if(title && btns && btns.length > 0){

? ? ? ? ? var btnArray = [];

? ? ? ? ? for(var i=0; i<btns.length; i++){

? ? ? ? ? ? ? btnArray.push({title:btns[i]});

? ? ? ? ? }

? ? ? ? ? ? plus.nativeUI.actionSheet({

? ? ? ? ? ? ? title : title,

? ? ? ? ? ? ? cancel : '取消',

? ? ? ? ? ? buttons : btnArray

? ? ? ? ? }, function(e){

? ? ? ? ? ? if(func) func(e);

? ? ? ? ? })

? ? ? }

},

choiceCamera({commit}){//相機

? ? var cmr = plus.camera.getCamera();?

? ? ? ? cmr.captureImage(function (path){?

? ? ? ? ? ? plus.io.resolveLocalFileSystemURL(path, function(entry){

? ? ? ? ? ? ? ? ? let localurl = entry.toLocalURL();

? ? ? ? ? ? ? ? ? actions.insertPhoto({commit},localurl);

? ? ? ? ? ? }, function(e){plus.nativeUI.toast("讀取拍照文件錯誤:" + e.message);? });?

? ? ? ? }, function(e){},{index:1,filename:"_doc/camera/"});?

},

choicePic({commit}){//多圖選擇

plus.gallery.pick(function(e){

? ? for(var i in e.files){

? ? if (i < 9) {

? ? ? ? ? ? ? actions.insertPhoto({commit},e.files[i]);

? ? ? ? }

? ? }

? ? }, function ( e ) {

? ? ? ? console.log( "取消選擇圖片" );

? ? },{filter:"image",multiple:true,

? ? ? ? ? maximum:9,

? ? });//過濾器只要圖片,多選

},

choiceDanpic({commit}){//丹徒選擇

plus.gallery.pick(function(path){

actions.insertPhoto({commit},path);

}, function ( e ) {

console.log( "取消選擇圖片" );

},{filter:"image",filename:'_documents/siyuan/'

});//過濾器只要圖片,多選

},

insertPhoto({commit},data){//選圖

? lrz(data, { width: 480 }).then(function(rst) {

? ? ? ? ? let? reader = new FileReader()

? ? ? ? ? ? ? ? reader.readAsDataURL(rst.file);

? ? ? ? ? ? ? ? reader.onload = function(e) {

? ? ? ? ? ? ? ? rst.imgshow=e.target.result;

? ? ? ? ? ? ? ? rst.guid=generateMixed(6);

? ? ? ? ? ? ? ? commit('headerimg_set',rst)

? ? ? ? ? ? }

? ? ? return rst

? ? }).always(function() {? // 清空文件上傳控件的值

? ? e.target.value = null

? ? });

},

delate({commit},guid){//刪除圖片

? commit('set_img_paths',guid)

},

getdata({commit},orderno){//獲取單個編號相冊情況

? commit('get_img_data',orderno)

},

clearupload({commit}){//清除照片

? ? commit('chu_set')

? },

getdanchuan({commit},obj){

? lrz(obj.files[0], {width: 350}, function (results) {import lrz from "lrz"

import {generateMixed} from "../common"

import {add2Cache,getFromCache,removeFromCache} from "../cache"

// Created by quanzaiyu on 2017/10/25 0025.

var state = {

? img_upload_cache: [],//上傳文件緩存

? img_paths: [],//上傳狀態,包括 ready selected uploading finished

? img_status:'ready',// # 上傳后的路徑反饋數組(數據結構為Set集合)

? items:new Map(),

? orderno:"",

headerimg:""

}

const actions = {

choiceImgdate({commit}){//選擇拍照或上傳

? if (!window.plus){

? ? ? ? ? ? actions. choiceDanpic({commit})//如果不支持plus,就用本地相冊上傳即可

? ? ? ? ? ? return;

? ? ? ? ? }

? ? ? ? let title = "選擇照片"

? ? ? ? let btns = ['拍照','相冊']

? ? ? ? ? var func = function(e){?

? ? ? ? ? var index = e.index;?

? ? ? ? ? ? if(index == 1) actions.choiceCamera({commit});?

? ? ? ? ? if(index == 2)? actions. choiceDanpic({commit});?

? ? ? ? }

? ? ? ? if(title && btns && btns.length > 0){

? ? ? ? ? var btnArray = [];

? ? ? ? ? for(var i=0; i<btns.length; i++){

? ? ? ? ? ? ? btnArray.push({title:btns[i]});

? ? ? ? ? }

? ? ? ? ? ? plus.nativeUI.actionSheet({

? ? ? ? ? ? ? title : title,

? ? ? ? ? ? ? cancel : '取消',

? ? ? ? ? ? buttons : btnArray

? ? ? ? ? }, function(e){

? ? ? ? ? ? if(func) func(e);

? ? ? ? ? })

? ? ? }

},

choiceCamera({commit}){//相機

? ? var cmr = plus.camera.getCamera();?

? ? ? ? cmr.captureImage(function (path){?

? ? ? ? ? ? plus.io.resolveLocalFileSystemURL(path, function(entry){

? ? ? ? ? ? ? ? ? let localurl = entry.toLocalURL();

? ? ? ? ? ? ? ? ? actions.insertPhoto({commit},localurl);

? ? ? ? ? ? }, function(e){plus.nativeUI.toast("讀取拍照文件錯誤:" + e.message);? });?

? ? ? ? }, function(e){},{index:1,filename:"_doc/camera/"});?

},

choicePic({commit}){//多圖選擇

plus.gallery.pick(function(e){

? ? for(var i in e.files){

? ? if (i < 9) {

? ? ? ? ? ? ? actions.insertPhoto({commit},e.files[i]);

? ? ? ? }

? ? }

? ? }, function ( e ) {

? ? ? ? console.log( "取消選擇圖片" );

? ? },{filter:"image",multiple:true,

? ? ? ? ? maximum:9,

? ? });//過濾器只要圖片,多選

},

choiceDanpic({commit}){//丹徒選擇

plus.gallery.pick(function(path){

actions.insertPhoto({commit},path);

}, function ( e ) {

console.log( "取消選擇圖片" );

},{filter:"image",filename:'_documents/siyuan/'

});//過濾器只要圖片,多選

},

insertPhoto({commit},data){//選圖

? lrz(data, { width: 480 }).then(function(rst) {

? ? ? ? ? let? reader = new FileReader()

? ? ? ? ? ? ? ? reader.readAsDataURL(rst.file);

? ? ? ? ? ? ? ? reader.onload = function(e) {

? ? ? ? ? ? ? ? rst.imgshow=e.target.result;

? ? ? ? ? ? ? ? rst.guid=generateMixed(6);

? ? ? ? ? ? ? ? commit('headerimg_set',rst)

? ? ? ? ? ? }

? ? ? return rst

? ? }).always(function() {? // 清空文件上傳控件的值

? ? e.target.value = null

? ? });

},

delate({commit},guid){//刪除圖片

? commit('set_img_paths',guid)

},

getdata({commit},orderno){//獲取單個編號相冊情況

? commit('get_img_data',orderno)

},

clearupload({commit}){//清除照片

? ? commit('chu_set')

? },

getdanchuan({commit},obj){

? lrz(obj.files[0], {width: 350}, function (results) {

? ? ? ? ? ? // 你需要的數據都在這里,可以以字符串的形式傳送base64給服務端轉存為圖片。

? ? ? ? ? ? commit('headerimg_set',results)

? ? ? ? });

}

}

const getters = {}

const mutations = {

? set_img_upload_cache (state,rst) {

? ? let? newItem=[];

console.log(state.orderno);

? ? if (state.items.has(state.orderno)) {

? ? ? ? newItem=state.items.get(state.orderno);

? ? ? ? newItem.push(rst)

? ? }else{

? ? ? newItem.push(rst)

? ? }

? ? ? ? state.items.set(state.orderno,newItem);

? ? ? ? let goods=state.items.get(state.orderno);

? ? ? state.img_upload_cache= goods

? },

? set_img_paths(state,guid){

? ? ? ? let? newItem=[];

? ? ? ? if (state.items.has(state.orderno)) {

? ? ? ? ? ? newItem=state.items.get(state.orderno)

? ? ? ? ? ? for(let i=0;i< newItem.length;i++){

? ? ? ? ? ? ? let pitem=newItem[i];

? ? ? ? ? ? ? if (pitem.guid==guid) {

? ? ? ? ? ? ? ? newItem.splice(i,1)

? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? }

? ? state.items.set(state.orderno,newItem);

? ? let goods=state.items.get(state.orderno);

? ? state.img_upload_cache= goods;

? },

? get_img_data(state,orderno){

? ? state.img_upload_cache=[];

? ? ? ? state.items.clear();

? ? ? state.orderno=orderno;

console.log("獲取傳遞過來的"+orderno)

? },

? chu_set(state){//上傳成功清除

? ? state.img_upload_cache=[];

? ? state.items.delete(state.orderno);

? ? state.orderno="";

? },

headerimg_set(state,rst){//單圖頭像base64

state.headerimg=rst.base64

}

}

export default {

? namespaced: true,

? state,

? mutations,

? actions,

? getters

}

? ? ? ? ? ? // 你需要的數據都在這里,可以以字符串的形式傳送base64給服務端轉存為圖片。

? ? ? ? ? ? commit('headerimg_set',results)

? ? ? ? });

}

}

const getters = {}

const mutations = {

? set_img_upload_cache (state,rst) {

? ? let? newItem=[];

console.log(state.orderno);

? ? if (state.items.has(state.orderno)) {

? ? ? ? newItem=state.items.get(state.orderno);

? ? ? ? newItem.push(rst)

? ? }else{

? ? ? newItem.push(rst)

? ? }

? ? ? ? state.items.set(state.orderno,newItem);

? ? ? ? let goods=state.items.get(state.orderno);

? ? ? state.img_upload_cache= goods

? },

? set_img_paths(state,guid){

? ? ? ? let? newItem=[];

? ? ? ? if (state.items.has(state.orderno)) {

? ? ? ? ? ? newItem=state.items.get(state.orderno)

? ? ? ? ? ? for(let i=0;i< newItem.length;i++){

? ? ? ? ? ? ? let pitem=newItem[i];

? ? ? ? ? ? ? if (pitem.guid==guid) {

? ? ? ? ? ? ? ? newItem.splice(i,1)

? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? }

? ? state.items.set(state.orderno,newItem);

? ? let goods=state.items.get(state.orderno);

? ? state.img_upload_cache= goods;

? },

? get_img_data(state,orderno){

? ? state.img_upload_cache=[];

? ? ? ? state.items.clear();

? ? ? state.orderno=orderno;

console.log("獲取傳遞過來的"+orderno)

? },

? chu_set(state){//上傳成功清除

? ? state.img_upload_cache=[];

? ? state.items.delete(state.orderno);

? ? state.orderno="";

? },

headerimg_set(state,rst){//單圖頭像base64

state.headerimg=rst.base64

}

}

export default {

? namespaced: true,

? state,

? mutations,

? actions,

? getters

}

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi閱讀 7,424評論 0 10
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些閱讀 2,046評論 0 2
  • 小班額、只有五個人的課堂如何進行教學?老師的教學理念和教學行為方式與大班額教學相比,是否發生了相應的變化?師...
    宋文潔閱讀 719評論 0 4
  • 對于教學類醫院來說,到了每年的實習季也是迎來送往的。鐵打的科室,流水的實習生。每個科室為期一個月的實習,每個月都是...
    晏知七閱讀 688評論 0 3
  • 16歲生日 天氣晴 今天老爸回來,帶給我承諾了半年的豬籠草種子,說是當生日禮物和畢業賀禮一起送了。比起我已經不是很...
    許鹿遠閱讀 279評論 0 0