快捷導(dǎo)航

element-ui中up-load組件實(shí)現(xiàn)圖片上傳回顯

更新時(shí)間：2024年01月26日 11:39:20 作者：加洛斯

在項(xiàng)目開發(fā)的時(shí)候很多人都會(huì)用到圖片上傳,本文主要介紹了element-ui中up-load組件實(shí)現(xiàn)圖片上傳回顯,具有一定的參考價(jià)值,感興趣的可以了解一下

方式一：直接上傳（auto-upload=“true”）

一：前端樣式以及效果：

前端樣式代碼如下：

<template>
  <div>
    <el-upload action="api/admin/file/uploadfoodpicture" list-type="picture-card" auto-upload="true"
      :on-success="sucuploadimg">
      <i class="el-icon-plus"></i>
    </el-upload>
    <img :src="imgUrl" alt="圖" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: ''
    };
  },
  methods: {
    sucuploadimg(res) {
      this.imgUrl = res.data;
    }
  }
}
</script>

二：后端Controller層

@RestController
@RequestMapping("/admin/file")
@Slf4j
@Api(value = "文件相關(guān)接口",tags = {"文件相關(guān)接口操作接口"})
public class filecontroller {

    @PostMapping("/uploadfoodpicture")
    @ApiOperation("上傳食物圖片")
    public Result uploadFoodPicture(@RequestBody  MultipartFile file) throws Exception {
            //獲取圖片原文件名
            log.info("啟動(dòng)圖片上傳功能");
            String url= FileUtil.uploadimg(file);//將傳遞的圖片交給FileUtil處理
            return Result.success(200,"上傳圖片成功",url);
    }
}

這里的處理邏輯是將前端傳遞進(jìn)來(lái)的圖片交給FileUtil處理，接下來(lái)看FileUtil的代碼：

@Component
public class FileUtil {
    public static  String imgsrc = "D:\\image\\";
    public static String uploadimg(MultipartFile file) throws IOException {
        String originalFilename = file.getOriginalFilename();
        //獲取原文件的后綴名
        if (originalFilename != null) {
            String fileExtension = originalFilename.substring(originalFilename.lastIndexOf("."));
            String uuid = UUID.randomUUID().toString();
            // 使用UUID和文件擴(kuò)展名來(lái)創(chuàng)建一個(gè)新的文件名
            String newFilename = uuid + fileExtension;
            file.transferTo(new File(FileUtil.imgsrc + newFilename));
            String url ="http://localhost:8080"+"/uploadimg/" +newFilename;
            return url;
        }
        return "上傳失敗";
    }
}

首先獲取傳遞進(jìn)來(lái)圖片的文件名后綴然后用UUID將其拼接得到一個(gè)新的名字

將圖片存入到本地的文件夾下面接下來(lái)返回路徑這里我用后端進(jìn)行拼接，看看這三個(gè)參數(shù)：

"http://localhost:8080"+"/uploadimg/" +newFilename;

其中"http://localhost:8080"是服務(wù)器端口號(hào)地址根據(jù)環(huán)境進(jìn)行變化，也可以拼接在前端

"/uploadimg/"是攔截器的關(guān)鍵詞一會(huì)進(jìn)行介紹

newFilename是經(jīng)過(guò)UUID拼接后的新文件名

我們接下來(lái)看看攔截器：在config文件夾下新建

@Configuration
@EnableWebMvc
public class MvcConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 配置靜態(tài)資源映射
        registry.addResourceHandler("/uploadimg/**")
                .addResourceLocations("file:///"+ FileUtil.imgsrc);
    }
}

攔截到路徑為/uploadimg/**后會(huì)替換為下面的地址而file:///是固定的，F(xiàn)ileUtil.imgsrc是在FileUtil里面定義的存儲(chǔ)圖片的地址

到此后端的準(zhǔn)備工作也完畢了

點(diǎn)擊上傳圖片

到此這篇關(guān)于element-ui中up-load組件實(shí)現(xiàn)圖片上傳回顯的文章就介紹到這了,更多相關(guān)element up-load圖片上傳回顯內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: