element vue 上传模板_上传图片vue模板

%block>

Vue.prototype.$http = axios;

Vue.use(iview);

new Vue({

el: '#app',

data() {

return {}

},

methods: {

fileChange() {

let fileList = document.querySelector('#imgLocal').files

// console.log(fileList) // files

let file = fileList[0]

// --------------使用FileReader图片预览--------------

const fileReader = new FileReader()

fileReader.readAsDataURL(file) //读取图片

fileReader.addEventListener('load', function () {

// 读取完成

let res = fileReader.result

// res是base64格式的图片

// console.log(res)

// 将DOM上img的src设为读取的结果即可实现预览功能。

document.getElementById("img1").src = res

})

// --------------------------------------------------

const formDate = new FormData()

// formDate使用append方法时第一个参数是后端取值用的

formDate.append('file', file, file.name)

let config = {

headers: {

'Content-Type': 'multipart/form-data'

}

}

axios.post('${SITE_URL}uploads/transfer/', formDate, config).then(res => {

if (res.data.result) {

alert('上传成功，路径为：' + res.data.data.Path)

} else {

this.$Message.error(res.data.data.message)

}

})

},

},

mounted() {

}

})