vue 上傳圖片
vue 用 file 的 change獲取到上傳檔案的基本資訊
<input type="file" name="file" class="upload__input" @change="uploadChange" accept="image/png,image/gif">
<div class="imgSrc">
<img :src="imgDataUrl" >
</div>
然後拿到圖片後用 beta64 轉化預覽圖片
uploadChange(event){ if(event.target.files.length>0){ this.files = event.target.files[0]; //提交的圖片 this.$conf.getBase64(event.target,(url)=>{ this.imgDataUrl = 'data:image/png;base64,'+url; //顯示的圖片 }); } },
beta64方法
getBase64 : function(file,callback){ var maxWidth = 640; if(file.files && file.files[0]){ var thisFile = file.files[0]; if(thisFile.size>2019200){ // mualert.alertBox("圖片不能超過800K"); alert("圖片不能超過2M"); return }; var reader = new FileReader(); reader.onload = function(event){ var imgUrl = event.target.result; var img = new Image(); img.onload = function(){ var canvasId = 'canvasBase64Imgid', canvas = document.getElementById(canvasId); if(canvas!=null){document.body.removeChild(canvas);} var canvas = document.createElement("canvas"); canvas.innerHTML = 'New Canvas'; canvas.setAttribute("id", canvasId); canvas.style.display='none'; document.body.appendChild(canvas); canvas.width = this.width; canvas.height = this.height; var imageWidth = this.width, imageHeight = this.height; if (this.width > maxWidth){ imageWidth = maxWidth; imageHeight = this.height * maxWidth/this.width; canvas.width = imageWidth; canvas.height = imageHeight; } var context = canvas.getContext('2d'); context.clearRect(0, 0, imageWidth, imageHeight); context.drawImage(this, 0, 0, imageWidth, imageHeight); var base64 = canvas.toDataURL('image/png',1); var imgbase = base64.substr(22); callback(imgbase) //this.imgUrl = } img.src = imgUrl; } reader.readAsDataURL(file.files[0]); } },
提交表單
addSub(){ let data = {}; let files = this.files; let param = new FormData(); //建立form物件 if(files!=''){ param.append('file', files,files.name); //單個圖片 ,多個用迴圈 append 新增 }else{ this.$message.error('請新增圖片'); } param.append('param', JSON.stringify(data));//新增form表單中其他資料 let config = { headers:{'Content-Type':'multipart/form-data'} }; //新增請求頭 this.$ajax.post(this.ajaxUrl +'addStation',param,config) .then(response=>{ var ret = response.data; if(ret.status){ this.$message({ message : '新增成功', type : 'success' }) //清空資料 this.imgDataUrl = ''; this.files = []; }else{ this.msg(ret.msg); } }) },
相關推薦
php 處理vue上傳圖片 base64_encode file_put_contents file_get_contents
vue:上傳圖片實際上是獲取圖片二進位制流,並通過base64加密,前頭會加上data:image/png;base64,帶有然後傳給後臺 類似:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANIAAAFYCAY
vue 上傳圖片到阿裏雲(前端直傳:不推薦)
size ive ati accep endpoint self code spl UNC 為何要這樣做:減輕後端數據庫壓力(個人覺得於前端沒啥用,誰返回來都行) 代碼部分: <template> <div
Vue 上傳圖片壓縮 的問題
前言 也是很少來寫部落格了,也是賴吧,哈哈 最近新的進度裡有上傳圖片太大,需要前臺進行圖片壓縮問題,然後查閱了相關資料 上傳圖片大於100* 1024 的用canvas 來壓縮來解決 然後IOS拍照上傳會有圖片旋轉的問題,然後用了github 上的exif.js很好的外掛,專案裡面npm
vue上傳圖片到7牛雲
html js inputChange(event){ //圖片上傳的事件 var file = event.target.files[0]; var formData = new FormData(); formData.append('file', file
vue 上傳圖片aliossupload 外掛使用
<el-row :gutter="20"> <el-col :span="2"> <div class="grid-content"><span class="text-justify goodsImg_title">商品圖片</sp
vue上傳圖片元件(支援拖拽資料夾上傳)
1.獲取拖拽上傳物件 drop(el) { el.stopPropagation(); el.preventDefault(); this.fileList(el.dataTransfer
vue上傳圖片時,console.log()圖片資訊遇到的坑
用vue開發專案時,有個上傳專案的功能 <input @change="uploadImages($event)" type="file" accept="image/jpeg,image/x-png,image/gif" id="" value="" />
vue 上傳圖片
vue 用 file 的 change獲取到上傳檔案的基本資訊 <input type="file" name="file" class="upload__input" @change="uploadChange" accept="image/png,image/g
vue上傳圖片元件編寫
編寫一個vue上傳圖片元件: 1.首先得有一個[type=file]檔案標籤並且隱藏,changge事件來獲取圖片: <input @change="fileChange($eve
基於VUE選擇上傳圖片並在頁面顯示(圖片可刪除)
.ajax sta http data .cn 數據 file prim 生成 demo例子: 依賴文件 : http://files.cnblogs.com/files/zhengweijie/jquery.form.rar HTML文本內容:
vue, vux調用微信點擊圖片,上傳圖片,刪除圖片,接口,其中選圖接口,蘋果手機顯示有問題,查看不到圖片,提交會提示fail not exist,解決如下
ssd fff sset ogre 默認 item config tom ima <template> <div v-cloak v-show="show"> <div v-show="mailbox">
vue 上傳二進制圖片
type function 二進制 data 制圖 dataurl hat cti 寫入 1.前段代碼 <el-form-item label="證件照片" prop="idImage"> <input @change=‘ss‘ typ
VUE彈框上傳圖片+預覽+壓縮圖片
先看一下實現效果 這裡彈出框我使用了一個外掛---------YDUI,一隻注重審美,且效能高效的移動端&微信UI。 安裝: $ npm install vue-ydui --save 在入口檔案中配置: import
vue-quill-editor-upload : 實現vue-quill-editor上傳圖片到伺服器
vue-quill-editor-upload git: https://github.com/NextBoy/vu... A plug-in for uploading images to your server when you use vue-quill-editor. 富文字編輯器vue-qui
vue中同時使用element元件的upload上傳圖片和wangEditor富文字編輯器
1.wangEditor —— 輕量級 web 富文字編輯器,配置方便,使用簡單。支援 IE10+ 瀏覽器。 下載wangEditor:npm install wangeditor(英文小寫) 官網:www.wangEditor.com 文件:www.kancloud.cn/wa
vue中使用elementUI元件的Upload 上傳圖片
1.安裝elementUI:npm i element-ui -S 2.引入elementUI元件(main.js檔案) import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'
axios在vue中的應用(二)—— 表單提交上傳圖片
使用axios實現圖片預覽、圖片上傳等功能: methods: { // 圖片預覽 priviewImg(e) { // ... }, // 提交表單 sumitRefund() { let fd = new FormDat
vue iOS上傳圖片file 出錯
前言 用vue 移動端上傳圖片在低版本的 ios 手機上 圖片轉換base64 在轉換file 檔案型別 會報錯 並且報錯 “Script Error ” 查閱了github 和一些文件發現 可以吧 file 改為 Blob 的 格式上傳,哈哈 上的程式碼 changeBa
vue iOS上傳圖片file 出錯
.com ret eat str hang inf ror urn github 前言 用vue 移動端上傳圖片在低版本的 ios 手機上 圖片轉換base64 在轉換file 文件類型 會報錯 並且報錯 “Script Error ” 查閱了github 和一些文檔發現
vue 整合ueditor(百度富文字編輯器)以及使用後端Java上傳圖片到伺服器,特別注意的大坑
1.import 引入ueditor時,在封裝元件中引入,不要在mian.js內引入,在main.js內引入會造成 1.Uncaught SyntaxError: Unexpected token : 這種錯誤,屬於是跨域問題,目前不清楚是什麼原因和原理,