vue上傳圖片並預覽
『壹』 uniapp上傳圖片至伺服器，獲得在線圖片鏈接預覽（實戰）
功能需求：
前端選擇本地文件，將選擇好的文件顯示在界面上進行預覽，可同時選擇四張進行預覽。
思路如下：
前端選擇本地的png、jpg、等格式的圖片，將圖片以二進制的形式傳到後端伺服器，後端對二進制圖片進行處理，返回給前端一個伺服器鏈接在線圖片，在瀏覽器就可以打開鏈接訪問的那種。然後前端將這個圖片鏈接渲染在頁面進行預覽。
首先
我們看一下uniapp的官方文檔：
https://uniapp.dcloud.io/api/media/image?id=chooseimage
大概是這樣的
先寫一個模擬的demo
1：首先我是是用了colorUI的框架，在項目裡面引入
在page底下的vue文件引入
這樣一來，就不需要寫什麼樣式了，直接使用寫好的就行了。
效果是這樣的
每次選完圖片之後顯示在頁面上，我這里設置了最多可以選擇四張，圖片鏈接使用了臨時的blob，接下來就要使用後端小夥伴給的介面，將自己本地的二進制文件傳給他了。
在 chooseImage 選擇好圖片之後，寫一個成功的回調函數，在回到函數裡面添加一個圖片上傳的方法uploadFile，在方法裡面添加url，等參數。
若是請求成功
則返回一個圖片鏈接
添加介面之後 的，demo如下：
『貳』 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，沒有其他屬性，比如文件大小，涉及到其他屬性的函數都沒辦法調用）