vue实现图片文件上传

最新推荐文章于 2024-05-07 00:04:32 发布

ps酷教程

最新推荐文章于 2024-05-07 00:04:32 发布

阅读量355

点赞数

分类专栏： # 阳光沙滩文章标签：前端

本文链接：https://blog.csdn.net/qq_16992475/article/details/126753967

版权

阳光沙滩专栏收录该内容

13 篇文章 0 订阅

订阅专栏

 <el-dialog
        class="cover-selector-container"
        :visible.sync="coverSelectorDialogVisible"
        width="890px"
>
    <el-button size="medium" @click="uploadFile">上传图片</el-button>
    <input type="file" hidden ref="coverFile"/>
    <div class="cover-container" v-loading="coverSelectorLoading">
        <el-image
                v-for="cover in coverImgList"
                :src="cover.url"
                style="width: 200px;height: 120px;"
                fit="cover"
                @click="selectedCoverId = cover.id"
                :class="{active: selectedCoverId === cover.id}"
        >
        </el-image>
    </div>
    <el-pagination
            style="float:left"
            background
            layout="prev, pager, next"
            @current-change="changePage"
            :page-size="pageSize"
            :total="total">
    </el-pagination>
    <span slot="footer" class="dialog-footer">
        <el-button @click="coverSelectorDialogVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="chooseSelectedCoverImg" size="medium">确 定</el-button>
    </span>
</el-dialog>

uploadFile() {
 let _this = this
    this.$refs['coverFile'].onchange = function () {
        let param = new FormData(); //创建form对象
        param.append('file', this.files[0]);//通过append向form对象添加数据
        let config = {
            headers: {'Content-Type': 'multipart/form-data'}
        }; //添加请求头
        axios.post('http://127.0.0.1:8081/api/admin/image/loop', param, config)
            .then(response => {
                console.log(response.data.data);
                _this.getImageList()
            })
    };
    this.$refs['coverFile'].click()
},
chooseSelectedCoverImg() {
    if (!this.selectedCoverId) {
        this.$message.error('请选择一张图片作为文章的封面')
        return
    }
    let selectedCoverImg = this.coverImgList.find(item=>item.id === this.selectedCoverId);
    this.article.cover = selectedCoverImg.url
    this.coverSelectorDialogVisible = false
}