vue圖片上傳組件
『壹』 Vue 上傳圖片到七牛雲實用攻略
vue 一般採用element 的upload 上傳圖片/文件。
首先，設定參數
參考Element upload 文檔
其次，如圖所示，重點在於domain和qiniuaddr兩個參數！ 參考 七牛雲存儲圖片域名文檔
然後 上傳一定要先獲取到七牛雲token！我是採用axios post獲取。
接著，把返回的 file.name賦值給 key
this.QiNiuYun.key = `name_${file.name}`;
如圖 上傳成功/錯誤處理 函數
大功告成！
補充：
1. this.uploadImageUrl 這個變數實際上是 圖片真正的URL-----https地址！！！
2. 該方法是針對單圖上傳，如果想多圖 將data 內的參數 limit：1 修改為需要的圖片數量 ！！！
3. 注意！當後台需要你傳遞多張圖片的url時，可採用 此方法！！！
//拼接 url
if(this.uploadImageList===''){
this.uploadImageList= this.uploadImageUrl;
}else{
this.uploadImageList=this.uploadImageList+';'+ this.uploadImageUrl;
}
『貳』 快速創建VUE移動端上傳圖片功能
主要功能：限制圖片張數、圖片大小壓縮、同時上傳多張、上傳後可編輯刪除、上傳中和上傳失敗狀態顯示。
使用配置：使用vantUI、axios請求經過封裝、安裝image-compressor.js圖片壓縮
npm install image-compressor.js //注意是image-compressor.js不是image-compressor
ps：從父級頁面傳入相應的值到props裡面
『叄』 vue-upload-component 上傳文件及圖片
演示： https://lian-yue.github.io/vue-upload-component/#/zh-cn/examples
地址： https://lian-yue.github.io/vue-upload-component/#/zh-cn/documents
『肆』 VUE上傳圖片跨域
上傳組件用的elementui - upload,由於上傳圖片需要用戶的登陸信息,所以前端請求頭添加了一個token ,屬於自定義header
跨域時瀏覽器發送options預檢請求,會帶上自定義的請求頭欄位,用來判斷該欄位是否被服務端支持.
『伍』 vue點擊上傳圖片，vue上傳oss，vue-cropper圖片裁剪功能
很多剛入門的小夥伴上傳圖片都會使用現成的框架，然後根據框架提供的api進行上傳，感覺這樣是最簡單的，其實上傳圖片是一個很簡單的功能，
1.將input的設為透明然後定位到按鈕上面，通過點擊實現上傳
2.點擊按鈕，通過處發input的點擊事件後處發change，達到喚起上傳圖片的效果
先通過npm安裝oss依賴
oss官方文檔
1.前端拿到 accessKeyId，accessKeySecret直接上傳oss
這種用法會直接暴露id及secret，相當於把自己家門的鑰匙告訴別人，不推薦使用
2.通過後台轉換，拿到對應的參數，進行上傳
圖片裁剪的插件，先通過npm安裝依賴
vue-cropper 高版本解決在ios上圖片拍照旋轉問題
父組件
子組件，在項目components文件中新建一個cropper文件，在父組件中引入
『陸』 vue2.x，element-ui 中上傳圖片組件（圖片查看，已有圖片渲染）
1、基本標簽結構
<el-upload name="picture"
:action="'/api/image/upload?imageType=xxx"
accept=".jpg, .png"
list-type="picture-card"
:limit="1"
:file-list="filelists"
:on-exceed="onExceed"
:before-upload="beforeUpload"
:on-preview="handlePictureCardPreview"
:on-success="imagesuccess"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<!--預覽-->
<el-dialog :visible.sync="imgPreviewVisible" size="full" :modal="false" title="預覽">
<img width="100%" :src="imagePreviewUrl" alt="">
</el-dialog>
方法示例：
onExceed(files, fileList) {
this.$message({
type: 'info',
message: '最多隻能上傳一個圖片',
ration: 6000
});
},
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isGIF = file.type === 'image/gif'
const isPNG = file.type === 'image/png'
const isBMP = file.type === 'image/bmp'
const imgSizeLimit= file.size < 1*1024*1024;
if (!isJPG && !isGIF && !isPNG && !isBMP) {
this.$message.error('上傳圖片必須是JPG/GIF/PNG/BMP 格式!');
}
if (!imgSizeLimit) {
this.$message.error('上傳圖片大小不能超過 1MB!');
}
return (isJPG || isBMP || isGIF || isPNG) && imgSizeLimit; },
handlePictureCardPreview:function(file){
//todo
},
imagesuccess:function(response, file, fileList){
//todo
this.filelists = [];
this.filelists = [file]
},
handleRemove:function(file, fileList){
//todo
},
2、action為後台上傳圖片介面
file-list為文件列表
limit為設置的可上傳文件的最大個數
onExceed上傳的文件個數超出設定時觸發的函數，參數為上傳的文件file和文件列表 filelists
beforeUpload文件上傳前執行，參數為上傳的文件file，如果返回false或者返回Primary且被reject，則停止上傳
handlePictureCardPreview圖片預覽時觸發，參數為上傳的文件file，
imagesuccess圖片上傳成功時觸發參數response, file, filelists
handleRemove移除圖片時觸發，參數為file, filelists
3、已有圖片渲染問題：
自己在實際開發過程中，會遇到編輯情況，並且已經存在一張圖片，想要放到圖片組件中，可以調用組件里聲明的方法。
由於是新手，組件使用不熟練，所以我將圖片的顯示與上傳等操作分離，單獨自己去展示，上傳時再使用組件上傳，使用組件的:show-file-list="false"屬性來隱藏組件自帶的圖片展示功能。
後來發現自己可以自己初始化filelists列表，來使已存在的圖片文件放入組件中，放入的對象當然時文件，但是我後台只有圖片地址，如何拼出一個file格式對象來呢？通過debug，我發現上傳的文件格式對象有好多屬性，當然，存在url這個屬性就可以通過組件進行展示。最簡單的一種方式就是直接創建一個只有一個url屬性的對象var file = { url:this.showDetailForm.profilePhotoPath } this.filelists.push(file) 然後push到文件列表，就可以在組件中進行渲染，對圖片的操作可以使用聲明的方法+表單屬性來實現業務的全過程（當然，這樣渲染的文件只有url，沒有其他屬性，比如文件大小，涉及到其他屬性的函數都沒辦法調用）
『柒』 vue mintui組件：多圖片上傳
瀏覽器地址欄輸入
data:image/jpeg;base64,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
『捌』 vue + elementui upload上傳圖片到伺服器以及保存後回顯問題
前言：
關於vue和elementui安裝導入使用不做介紹
1.template中首先展示upload多張圖片上傳
2.當upload組件發生改變時處罰addFile
3.圖片提交到伺服器，拿到伺服器的數據地址
3.顯示圖片 將拿到的數據放進一個數組中顯示到file-list中去就好了
至此，完結。
有不對的地方歡迎指導哦。
『玖』 vue頁面傳值能傳圖片嗎
可以
1.雲儲存
常見的 七牛雲，OSS（阿里雲）等，這些雲平台提供API介面，調用相應的介面，文件上傳後會返回圖片存儲在伺服器上的路徑，前端獲得這個路徑保存下來提交給後端即可。此流程處理相對簡單。
主要步驟
向後端發送請求，獲取OSS配置數據
文件上傳，調用OSS提供介面
文件上傳完成，後的文件存儲在伺服器上的路徑
將返回的路徑存值到表單對象中
代碼範例
我們以阿里的 OSS 服務來實現，們試著來封裝一個OSS的圖片上傳組件。
通過element-ui的upLoad組件的 http-request 參數來自定義我們的文件上傳，僅僅使用他組件的樣式，和其他上傳前的相關鉤子（控制圖片大小，上傳數量限制等）。
『拾』 vue上傳圖片設置headers表頭信息
<el-form-item label="icon圖標" prop="icon">
<span><img :src="ruleForm.icon_url" min-width="70" height="70" />
class="avatar-uploader"
action
name="file1"
:data="{index:1}"//傳遞參數
:show-file-list="false"
:http-request="uploadFileUrl" > <div class="upload-btn">上傳
</el-form-item>
//上傳圖片
uploadFileUrl(file){
var fileIndex=file.data.index;
//console.log("=========",file.data.index);
let formData =new FormData()
formData.append("file", file.file)
/**上傳圖片介面*/
const instance =Axios.create({
baseURL:"http://216.118.XXX.50:8082",//伺服器地址
timeout:10000,
headers:{'Content-Type':'multipart/form-data',"auth":sessionStorage.getItem("token"),"uid":sessionStorage.getItem("uid_ciphertext")},
method:'POST',
data:formData
})
instance({url:"/api/v1/admins/games/images/upload"}).then((data) => {
// console.log(JSON.stringify(data))
this.ruleForm.icon_url=data.data.data.icon_url;
})
},