vue + qiniu(七牛) + axios 实现图片上传

来源：互联网发布：泰安剑泉网络姬娜编辑：程序博客网时间：2024/06/09 16:05

上传头像功能，可以使用原生的ajax，现在有了axios封装好的ajax，通过formData的方式。
上传七牛的图片，前提是要先从后台获取的一个token的，上传图片时候作为参数传给七牛。
自己对应设置反向代理

七牛的官方文档

效果如下：
这里写图片描述

以下只粘贴出关键代码：

<header class="header">    <label class="avatar-bg">        <!--默认显示的一张图片-->        <div class="avatar" v-if="!previewAvatar"></div>        <!--七牛回调的图片path-->        <img :src="previewAvatar" class="real-photo" v-if="previewAvatar">        <input ref="upload" id="upload" type="file" class="realfilebt" style="display: none;"/>    </label>    <!--mint-ui的progress的库-->    <mt-progress v-if="!(progress==0||progress==100)" :value="progress" :bar-height="5"      class="progress"></mt-progress></header>

<script>//引入axiosimport axios from 'axios';import Progress from 'mint-ui/lib/progress';import 'mint-ui/lib/Progress/style.css';//创建axios的实例const axiosInstance = axios.create({});export default {    name: 'test',    data() {        return {            files: [], // 文件            uploadToken: '', // 上传文件 token            previewAvatar: '', // 页面展示的avatar            progress: 0, // 进度条        };    },    //node版本要是8+，以上才能使用async await的方法    async mounted() {        let self = this;        //页面加载 拉去token        let tokenRes = await axios({            url: '/api/sz/upToken',        });        this.uploadToken = tokenRes.data.token;        this.$refs.upload.addEventListener('change', function() {            //console.log(this.files)            var data = new FormData();            data.append('token', self.uploadToken);            data.append('file', this.files[0]);            axiosInstance({                method: 'POST',                url: 'http://up.qiniu.com',                data: data,                onUploadProgress: function(progressEvent) {                    var percentCompleted = Math.round(progressEvent.loaded * 100 / progressEvent.total);                    //console.log(percentCompleted)                    //对应上传进度条                    self.progress = percentCompleted;                },            })                .then(function(res) {                    //console.log('res',res)                    let { base_url, path } = res.data;                    //页面所用字段                    self.previewAvatar = `${base_url}${path}?imageView2/1/w/154/h/154`;                    //传给后台不完整                    self.formData.avatar = `${path}`;                })                .catch(function(err) {                    console.log('err', err);                });        });    },    components: {        [Progress.name]: Progress,   //mint-ui引入组件的方法    },};</script>

阅读全文

1 0