Vue小tips-d12

一、图片上传

1.el-upload组件

<el-upload
           action="#"
           list-type="picture-card"
           :auto-upload="false"
           :on-change="fileChange"
           >
    <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{file}">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
        <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
            </span>
            <span class="el-upload-list__item-delete">
                <i class="el-icon-delete"></i>
            </span>
        </span>
    </div>
</el-upload>

 

• action 图片上传地址，#没有上传地址
• list-type 文件上传按钮的类型
• auto-upload 是否自动上传，false不自动上传
• on-change 选择好文件后触发的函数

 

js代码

<script>
export default {
    data(){
        // 定义分类的初始数据
        return{
            dialogVisible:false,
            dialogImageUrl:''
            ...
        }
    }
    methods:{
        handlePictureCardPreview(){
            //图片预览的代码
        },
        fileChange(file){
            //文件选择后执行的业务逻辑代码
            this.info.img = file.raw;
        }
    }
}
</script>

 

2.数据提交

在js中，包含文件类型的数据不能是对象格式，必须是表单才能够提交文件

　　(1)生成一个空的表单

var data = new FormData()

　　

　　(2)把对象中的数据追加到表单中

//需要往表单中追加数据
for(let i in this.info){
    data.append(i,this.info[i]);
}

　　

　　(3)提交数据时提交的是表单数据

this.axios.post(url,data).then(res=>{
    if(res.data.code === 200){
        this.$router.push('/cate')
    }
})