短视频平台搭建，图片进行预览上传、删除，读取本地文件

短视频平台搭建，图片进行预览上传、删除，读取本地文件实现的相关代码

前端待提交的表单部分代码

 

<el-form-item label="封面图片">
                <el-upload v-model="dataForm.title"
                        class="avatar-uploader"
                        :limit="1"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        multiple
                        :http-request="uploadFile"
                        :on-remove="handleRemove"
                        :on-change='changeUpload'
                        :file-list="images">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>

​

预览图片和上传图片以及删除图片

 

changeUpload: function(file, fileList) {//预览图片
                this.fileList = fileList;
            },
            uploadFile(file){
 
            },
            handleRemove(file, fileList) {
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },   

   

上传文件到本地的静态方法

 

 /**
     * 上传文件
     *@author lyy
     * @param file
     * @return
     * @throws IOException
     * @throws IllegalStateException
     */
    public static String uploadFile(String uuid, MultipartFile file) throws IllegalStateException, IOException {
        String defaultUrl = MyFileConfig.getFilePath();
        String Directory = java.io.File.separator ;
        String realUrl = defaultUrl + Directory;
        java.io.File realFile = new  java.io.File(realUrl);
        if (!realFile.exists() && !realFile.isDirectory()) {
            realFile.mkdirs();
        }
        String fullFile = realUrl + uuid + "."+FileUtil.getFileExt(file.getOriginalFilename());
        file.transferTo(new java.io. File(fullFile));
        String relativePlanUrl = Directory;
        return relativePlanUrl.replaceAll("\\", "/");
    }

 

以上就是短视频平台搭建，图片进行预览上传、删除，读取本地文件实现的相关代码， 更多内容欢迎关注之后的文章