短視訊平臺搭建，圖片進行預覽上傳、刪除，讀取本地檔案

短視訊平臺搭建，圖片進行預覽上傳、刪除，讀取本地檔案實現的相關程式碼

前端待提交的表單部分程式碼

<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("\\", "/");
    }

以上就是短視訊平臺搭建，圖片進行預覽上傳、刪除，讀取本地檔案實現的相關程式碼， 更多內容歡迎關注之後的文章