使用layui.upload通过图片相对路径上传默认图片

使用 layui.upload 来通过图片相对路径上传默认图片的步骤如下：

1. 在 HTML 页面中引入 layui 相关的样式和脚本文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.5.7/dist/css/layui.css">
<script src="https://cdn.jsdelivr.net/npm/layui@2.5.7/dist/layui.js"></script>

2. 创建一个文件上传的 input 元素：

<input type="file" name="file" id="uploadInput" style="display: none;">

3. 添加一个默认图片的预览区域：

<div id="previewContainer">
  <img id="previewImage" src="images/default.jpg" alt="Default Image">
</div>

4. 初始化 layui.upload：

<script>
  layui.use(['upload'], function(){
    var upload = layui.upload;
    
    // 执行上传
    var uploadInst = upload.render({
      elem: '#previewContainer',
      url: '/upload', // 上传接口地址
      accept: 'images',
      exts: 'jpg|jpeg|png|gif', // 允许上传的图片类型
      done: function(res){
        // 上传完毕回调
        console.log(res);
      },
      error: function(){
        // 请求异常回调
      }
    });
  });
</script>

在上面的代码中，我们初始化了 layui.upload，并指定了上传的接口地址、允许上传的图片类型、上传成功后的回调函数等。其中 `elem` 参数指定了点击预览区域时触发上传操作。

请注意，你需要将以上代码中的接口地址 `/upload` 替换为你实际的后端接口地址。在后端接口中，你可以根据上传的图片文件做相应的处理。

这样，当用户点击预览区域时，会触发上传操作，选择的图片会被上传到后端。在上传成功后，你可以在 `done` 回调函数中对上传结果进行处理。

希望以上步骤对你有所帮助！