vue+emelent 上传图片,上传到oss、上传到服务器、图片转base64
1.上传图片到oss
export const uploadImg = (sing, file) => {
let index = file.name.lastIndexOf(".")
let suffix = file.name.substr(index + 1)
let userId = JSON.parse(localStorage.getItem('userinfo')).id
let key = userId + "/" + Date.now() + "." + suffix
const formData = new FormData()
formData.append('key', key)
formData.append('OSSAccessKeyId', sing.accessId)
formData.append('policy', sing.policy)
formData.append('signature', sing.signature)
formData.append('success_action_status', '200')
formData.append('file', file)
let url = ''
if (process.env.NODE_ENV === "development"){
url = '/api_img'
}else if(process.env.NODE_ENV === "production"){
url = localStorage.getItem('oss_url')
}
return new Promise((resolve, reject) => {
axios({
url,
method: 'POST',
data: formData,
headers:{
"Content-Type": "multipart/form-data"
}
}).then((res) => {
console.log('上传图片response',res)
let url = ''
url = localStorage.getItem('oss_url')+key
if(res.code==401 || res.code==402){
localStorage.removeItem('userinfo')
localStorage.removeItem('token')
window.location.href = window.location.href.split('#')[0]+'#/login'
}
resolve(url)
console.log('上传图片resolve',url)
}).catch(error => {
console.log('error',error)
reject(error)
})
})
}
2.上传图片到服务器
export const uploadImg = (file) => {
let index = file.name.lastIndexOf(".")
let suffix = file.name.substr(index + 1)
let userId = JSON.parse(localStorage.getItem('userinfo')).id
let key = userId + "/" + Date.now() + "." + suffix
const formData = new FormData()
formData.append('name', key)
formData.append('file', file)
return new Promise((resolve, reject) => {
axios({
url: '上传图片服务器接口'
, method: 'POST'
, data: formData
, headers: {
'Content-Type': 'multipart/form-data; boundary = ' + new Date().getTime(),
}
}).then((response) => {
if (response.status === 200 && response.data.code === 200) {
} else {
reject(response)
}
}).catch(error => {
reject(error)
})
})
}
3.上传图片转base64
<el-upload
action=""
class="avatar-uploader"
accept="image/jpeg, image/jpg, image/png"
list-type="picture-card"
:show-file-list="false"
:http-request="uploadImages"
:before-upload="beforeFileUpload"
>
<i class="el-icon-plus"></i>
</el-upload>
uploadImages({ file }) {
this.getBase64(file).then(res => {
this.images.push(res)
})
},
getBase64(file) {
return new Promise(function(resolve, reject) {
const reader = new FileReader()
let imgResult = ''
reader.readAsDataURL(file)
reader.onload = function() {
imgResult = reader.result
}
reader.onerror = function(error) {
reject(error)
}
reader.onloadend = function() {
resolve(imgResult)
}
})
},
beforeFileUpload(file) {
const isImage = ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type)
if (!isImage) {
this.$message.error('文件必须是图片格式')
}
const isLt5M = file.size / 1024 / 1024 < 5
if (!isLt5M) {
this.$message.error('图片大小不超过5M!')
}
return isImage && isLt5M
}