h5+app上傳圖片
- 一、引入axios等組件
- 二、相機拍照
- 三、上傳圖片
一、引入axios等組件
import axios from 'axios';
import qs from 'qs';
import { MessageBox } from 'mint-ui';
二、相機拍照
先定義div容器和按鈕，用于點擊拍照和上傳圖片
<div class="camera" @click="camera">+ 拍攝現場照片</div>
<div class="button">
<el-button type="primary" class="submit" @click="addForm">提交巡檢資料</el-button>
</div>
呼叫攝像頭拍照（可進行適當的圖片壓縮轉換）
// 呼叫攝像頭
camera() {
let that = this;
var cmr = plus.camera.getCamera(); //獲取攝像頭管理物件
var res = cmr.supportedImageResolutions[0]; //字串陣列，攝像頭支持的拍照解析度
var fmt = cmr.supportedImageFormats[0]; //字串陣列，攝像頭支持的拍照檔案格式
console.log("拍照解析度: " + res + ", 拍照檔案格式: " + fmt);
cmr.captureImage(function(path) {
//進行拍照操作
// 通過URL引數獲取目錄物件或檔案物件
plus.io.resolveLocalFileSystemURL(path, function(entry) {
var tmpPath = entry.toLocalURL(); //獲取目錄路徑轉換為本地路徑URL地址
that.fileSrc = tmpPath
that.setImg(that.fileSrc);
});
}
},
// 對圖片進行適當處理
setImg(fileSrc) {
let that = this;
var name = JSON.stringify(fileSrc).split('/')
var file_name = name[name.length - 1].split('.')[0]
plus.zip.compressImage(
{
src: fileSrc,
dst: "_doc/" + file_name + ".jpg", //定義圖片地址
overwrite: true, //是否覆寫原來檔案
//width: '270px', //圖片寬度 設定則表示縮放
//height:'270px', //圖片高度 設定則表示縮放
format: 'jpg', //圖片壓縮后的格式
quality: 50 //圖片壓縮的質量 最高100 默認50
},
function(e) {
var image = new Image();
image.src = e.target;
image.width = e.width;
image.height = e.height;
image.size = e.size;
image.index = index;
that.scanFileArr.push(image);
},
function(err) {
plus.nativeUI.alert('未知錯誤！', function() { });
}
)
}
三、上傳圖片
// 提交巡檢資料
addForm() {
let that = this
if(that.fileSrc == ''){
MessageBox.alert('上傳附件不能為空!').then(action => {});
return
}
// 請求上傳管理創建新的上傳任務，創建成功則回傳Upload物件，用于管理上傳任務，
var task = plus.uploader.createUpload(that.api+ "介面地址",{ method:"POST"},
function ( t, status ) {
// 決議上傳成功回傳的資料
that.uploaderBackData = JSON.parse( t.responseText)
that.uploadFileArr = []
that.uploadFileArr.push(that.uploaderBackData.file_guid)
// 上傳完成
if ( that.uploaderBackData.status == 200 ) {
// 圖片上傳完成，可進行下一步的操作（可以進行添加一類的操作）
if(that.note == ''){
MessageBox.alert('巡檢描述不能為空!').then(action => {});
return
}
} else {
MessageBox.alert('圖片上傳失敗!').then(action => {});
}
});
// 向上傳任務中添加檔案，必須在任務開始上傳前呼叫，
// 第一個引數是檔案上傳的路徑，支持本地的檔案，可以將剛才拍照得到的路徑放在這里
// 第二個引數是要添加上傳檔案的引數
task.addFile( that.fileSrc, {key:"files"} );
// 向上傳任務中添加資料，必須在任務開始上傳前呼叫
task.addData("current_project_id", that.project_id);
// 開始上傳任務
task.start();
},
這樣一個簡單的h5+app上傳圖片就完成啦！
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/232479.html
標籤：其他
上一篇：A. Road To Zero
下一篇：Android事件分發機制小結